Component (state, props)

Component 란?

Component는 클래스형과  함수형이 있다. 생김새만 다르고 동일하다고 봐도 무방하다.

 

리액트가 레고라면, Component는 블럭이라고 한다.

즉, 리액트를 구성하고 있는 하나하나를 컴포넌트라고 한다!

 

예를들어, 보통의 웹사이트를 조각내 본다면 ! 

크게보면 header 영역, Contents영역, footer영역 으로 나눌수가 있다. 물론, 각 영역마다 세부적으로 들어간다면 더 영역이 나눠질순 있다.

 

이때, 나눈 조각 하나하나를 컴포넌트라고한다.

1. <header/>
2. <container/>
3. <footer/>

다시말하면, 이 컴포넌트는 웹 사이트의 조각이며, 이것들을 모아서 웹사이트를 구성하는 것이다.

 

Component에서 데이터 관리 방법 - state 와 props

state는 Component가 가지고 있는 데이터이다.

예를들어, header영역에 필요한 로고이미지경로, 메뉴, 이름 등등 여러가지 데이터들이 있는데 이러한 데이터는 다른곳에 쓰이지않고 

오직 header영역에만 쓰인다. 

이말은 state는 한 컴포넌트에서만 사용하는 정보를 넣어 놓고 생성, 수정 하는 데이터이다.

→ 생성, 수정도 해당 컴포넌트에서만 이루어진다. 내꺼기 때문에 자유롭게 수정이 가능하다. 

 

props는 Component가 부모 Component로 부터 받아온 데이터이다.

예르들어, 아래와같이 container 컴포넌트에 두개의 자식 컴포넌트가 있다고 해보자.

<container>

    <imagebanner/> 

    <contents1/>

</container>

• <container/> 컴포넌트만 <imangebanner/> 컴포넌트한테 필요한 이미지 경로를 가지고 있다고 가정(state로 가지고 있다고 가정
• 이 때 <imagebanner/> 컴포넌트는 자신의 부모인 <container/>컴포넌트로부터 이미지 경로를 전달받아서 사용해야한다. 
• <container/>가 가지고 있는 이미지 경로를 <imagebanner/>에게 전달해주면, 이 이미지 경로가 <imagebanner/> 컴포넌트의 props가 된다. 
• 다시 말해, 부모 컴포넌트로부터 전달 받은 데이터를 props라고 합니다.
• 그럼 부모 컴포넌트가 가지고 있는 데이터를 <imagebanner/> 컴포넌트가 추가 하거나 수정할 수는 없다.
• Props로 받은 데이터는 수정할 수 없다! 남의 거니까!