[reactJS] 컴포넌트 만들기.

App.js에 컴포넌트를 만들때

render( return ( 하나의 최상의 태그만 넣어야 한다 ) )

해당 그림은 유사 자바스크립트로 js랑 비슷하지만 html 규격에 맞게 까다롭게 정의하는 부분을 과감히 생략하는 느낌?

jsx로 코드를 작성하면 create-react-app이 javascript 코드로 converting해준다.

 

각 구문을 컴포넌트화해서 방대한 양의 코드가 있어도 간결하고 가독성이 높아진다.

 

여기서 예를 들어

<InnerSub></InnerSub>

<InnerSub></InnerSub>

<InnerSub></InnerSub>

와 같이 같은 세개의 컴포넌트를 넣으면 3개가 각각 들어가겠지만, 중복된 값이 들어간다는 아쉬움이 있다.

이를 해결하기 위해 react는 props라는 속성을 가지고 있다. (html 의 attribute 속성과 비슷하다고 함)

<Subject title="WEB" sub="world wide web!"></Subject>

- 해당 구문은 react의 속성을 이용해서 위에 그림의 Subject component안에 있는 title과 sub에 매칭해준다.

{this.props.*} 

- *는 main과 매칭되는 원하는 이름.

 

export default InnerSub; //InnerSub를 가져다 쓰는 쪽에서 InnerSub class를 가져다 쓸 수 있게 된다.