본문 바로가기

리액트21

[React] 함수형 컴포넌트 VS 클래스형 컴포넌트 안녕하세요. 오늘은 컴포넌트에 대해서 알아보겠습니다. 컴포넌트는 인터페이스를 설계할 때 사용자가 볼 수 있는 여러가지 요소들을 뜻합니다. 컴포넌트는 props를 받아서 elelement를 출력하는 함수와 같습니다. 이러한 컴포넌트를 선언하는 방식으로는 두가지가 있습니다. 바로 함수형 컴포넌트와 클래스형 컴포넌트! 과연 둘은 어떤 차이가 있고, 어떤 기준으로 사용할 컴포넌트를 정하는게 좋을까요? 저는 이에 대한 내용을 '리액트를 다루는 기술' 책과 리액트 공식문서를 사용하여 공부했습니다. (ko.reactjs.org/docs/components-and-props.html#function-and-class-components) 제가 이해한 개념을 쓰는 것이기 때문에, 틀릴 수도 있다는 점! ✔코드비교 //함.. 2020. 12. 29.

[React] JSX ❗아래 내용은 [리액트를 다루는 기술] 책에서 공부한 내용을 요약하였습니다. JSX란 자바스크립트의 확장문법이며, XML과 매우 비슷하게 생김 JSX를 사용하면,,, 편하게 렌더링 가능 HTML코드와 유사해서 보기 쉽고, 익숙 컴포넌트를 HTML태그 쓰듯이 사용하면서 활용도가 높음 예시) import React from 'react'; function App(){ return( 리액트 안녕! 잘 작동하니? ); } export default App; 위의 코드처럼 h1태그와 h2태그가 div태그 하나로 감싸져있다. 이렇게 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸는 이유? 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문 조건부 연산자 JSX 내부의 자바스크립트 .. 2020. 12. 23.

[React] 이벤트 핸들링 EVENT = 특정 '사건' 버튼 클릭 이벤트 => 사용자가 버튼을 클릭한 사건 HTML Activate Lasers HTML onclick이 소문자로 이루어져있음 이벤트를 처리할 함수를 큰따옴표("")로 묶어서 표현해놓았음 React Activate Lasers React onClick의 C가 HTML과 다르게 대문자로 나타냄 이벤트를 전달할 때 문자열이 아닌 함수(이벤트처리 함수)를 전달 Camel Case 파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위함 리액트의 함수 핸들링에서 사용됨 Event handler = Event Listener 이벤트를 처리하는 함수 어떤 사건이 발생하면, 사건을 처리하는 역할 이벤트 핸들링 공식 문서 쉬운 예시(onClick 사용) JS) onClick .. 2020. 11. 30.

이전 1 2 3 4 다음

티스토리툴바