코딩앙마 React 공부(컴포넌트, JSX)

React로 만든 페이지는 컴포넌트로 구성되어 있다. 

페이지 단위로 HTML을 작성하는 것이 아닌 각 부분을 컴포넌트로 만들어서 조립해서 사용하는 것이다. (=> 코드의 재사용과 유지보수)

 

전에 공부했던 것이 그대로 남아있다면 하나의 컴포넌트(App.js)가 있을것이다. App컴포넌트는 함수로 만들어져있고 Default로 export 되고 있다는 것을 알수있다. 이것을 indes.js에서 import해서 사용하고있다

 

function이라는 함수로 만들어져 있고. default로 export 되고 있다.(App.js파일)

 

index.js 파일

 

 

함수로 만들어진 컴포넌트 = 함수형 컴포넌트

모든 컴포넌트는 대문자로 시작해야 한다. (함수가 리턴하는 것은 JSX(=JavaScript XML)이다.)

 

class는 자바스크립트 예약어기 때문에 className으로 작성해야한다.

 

 

style은 객체로 전달해야 적용된다.

객체로 전달

 

css에서 쓰는 background-color와 다르게 backgroundColor는 카멜케이스로 작성해야한다.

 

중괄호 내부에서 변수를 사용할 수 있다.

 

숫자나 문자열은 잘 나오지만, boolean타입이나 객체는 표현하지못한다.

 

 

 

naver 사이트 연결링크를 띄워보기