[리엑트] 7) JSX(HTML 비슷) 컴포넌트 만들기
리엑트 컴포넌트로 JSX 깔끔하게 하기
리엑트는 컴포턴트 단위로 만들면 좋은데요. 여기서 컴포넌트란 웹페이지에서 박스 단위라고 생각하시면 됩니다.
컴포넌트는 자주값이 바뀌거나 반복적으로 사용 되는것을 별도로 떼어 냅니다.
JSX에서 return 할때 최상위 태그는 반드시 1개만 있어야 합니다.
즉, 아래와 같은것은 안된다는 것입니다.
return (
<div></div>
<span></span>
)
같은 레벨에서의 최상위 태그는 반드시 1개만 있어야 합니다.
이런 경우 밖에 <div>로 묶어 주거나
명칭 없는 <> </>를 최상위에 넣어 주면 됩니다.
* 리엑트 컴포넌트 주의사항
- 컴포넌트는 명칭을 첫글자는 반드시 대문자로 만들어야 합니다. 즉, function을 사용한다고 등급이 함수가 아니라는 것이다.
- 많이 만들면 state 관리가 힘들다
* 참고자료
코딩애플 - 콤포넌트 만들기
https://www.youtube.com/watch?v=bq2SjODrhJQ&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=7