[REACT] Component란?

■ Component란?

리액트는 레고! 컴포넌트는 블록!

 

웹사이트를 조각내자

컴포넌트를 이해하고 잘 써먹으려면 웹 사이트를 잘 조각낼 줄 알아야한다.

이 페이지를 만든다고 생각해보자

간단하게

 

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

• 이렇게 조각으로 나눌 수 있다.
• 이렇게 나눈 조각 하나하나를 컴포넌트라고 부른다.
• header컴포넌트, container컴포넌트, footer컴포넌트가 있고
• container컴포넌트 안에는 imagebanner컴포넌트, contests1컴포넌트가 있다.

 

 

• Component는 웹 사이트의 조각이고, 우리는 이 조각을 모아서 웹 사이트에 뿌려준다.

 

 

 

◎ Component에서 데이터 관리는 어떻게 하는가?

state

• state는 component가 가지고 있는 데이터이다.
• 해당 컴포넌트에서만 사용하는 정보이고 그 컴포넌트에서만 생성, 수정할 수 있다.
• 다른 컴포넌트에서는 수정할 수 없다.

 

props

• props는 컴포넌트가 부모 컴포넌트에서부터 받아온 데이터이다.
• container컴포넌트의 자식은 imagebanner과 contests1컴포넌트가 있었는데
• imagebanner와 contests1에서 container컴포넌트가 state로 가지고 있는 데이터를
• props로 받아서 사용한다.
• 사용할 수만 있고 수정할 수는 없다. 자기 state가 아니기 때문!