[React] Component

1. Component 작성, 사용 3 Step

 1) function 작성하기

 2) return문에 html 요소 작성

 3) <함수명></함수명> or <함수명/> 다른 function의 return문에 포함시키기

 

 

2. Component 작성시 유의사항

 1) 작명시 일반적으로 영어 대문자 사용

 2) return문 안에 html 태그가 평행하게 여러개 들어갈 수 없음

 3) function App(){} 외부에서 만들어야 한다.

    -> function App(){}도 일종의 Component이기 때문

 

 

3. Component 사용 시 단점

 1) function 안의 변수를 다른 function에서 마음대로 가져다 쓸 수 없다.

    -> props를 활용해야함

 

 

컴포넌트 사용 예

 line 7 : Modal 컴포넌트를 출력할지, 말지 결정할 boolean state 선언

 line 16 : h4 태그를 클릭했을 때, modal의 state를 변경

 line 35 : modal의 값에 따라 Modal 컴포넌트를 출력할지 말지 결정할 삼항연산자

 line 42 : Modal 컴포넌트를 function으로 생성