[React] #3 컴포넌트, JSX

해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.

컴포넌트

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

페이지 단위로 html 을 작성하는 것이 아니라, 각 부분을 컴포넌트로 만들고 조율해서 사용한다.

⇒ 컴포넌트로 구성되면, 비슷한 부분들은 코드를 재사용할 수 있고, 유지보수도 더 쉬워진다.

EX ) 광고 컴포넌트가 여러개인 경우, 똑같은 컴포넌트를 스타일만 다르게 해서 재활용할 수 있다.

App 컴포넌트

현재 voca 폴더에는 App 컴포넌트 하나만 존재한다.

이 App 컴포넌트는 함수로 만들어져있다. 그리고 디폴트로 export 되고 있다. 이걸 index.js 에서 import 해서 사용한다.

JSX(JavaScript XML)

함수로 만들어진 컴포넌트를 함수형 컴포넌트라고 한다.

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

JSX 는 HTML 처럼 생겼다. HTML 을 다뤄봤다면 쉽게 적응할 수 있다.

class 는 자바스크립트 예약어여서, className 으로 표기해야 한다.

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

이런식으로 자바스크립트 문법인 객체로 style 을 작성하면 된다.

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

숫자나 문자열은 중괄호에서 잘 나타낼 수 있지만, 불린타입이나 객체는 중괄호 그대로 표현할 수 없다. 에러가 발생한다.