React.js (JSX) 실습해보기 - 2

리액트는 이렇게 컴포넌트로 분할해서 재사용할 수 있다.

JSX는 리액트에 컴포넌트를 만드는데 사용되는 문법이다.

index.js는 최상위 컴포넌트를 정의한다. 여기서는 App.js가 최상위 컴포넌트로 지정되어 있다.

스타일 설정하기

App.js는 App.css의 스타일을 불러온다. / App.css에서 선언한 값에 의해서 아래와 같은 결과화면이 된다.

스타일 설정하기 (객체 사용)2

App.js에서 자체적으로 style객체를 만들어 설정할 수 있다

---

렌더하는 방법 1

미리 지정한 name 변수가 h2의 {name}에 의해서 아래와 같은 화면이 나온다.

랜더하는 방법2

삼항연산자를 이용해서 조건에 따라 다른 값을 렌더링하는 것도 가능하다.

조건부 렌더링이라고 함.