[복습]React 주요 개념 정리 - Component, state, props

1. Component란?

컴포넌트는 블록이라고 이해하면 쉽다. 

 

웹사이트를 하나를 만들더라도 조각내서 보면 여러 블록들로 이루어져 있으며, 일반적인 웹사이트의 경우에는 

header , container , footer 등등으로 이루어져있고 또 그안에 content , bannerimage 등등으로 또 이루어져있다.

 

 2. state , props

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

state는 한 컴포넌트에서만 사용되는 데이터로써 주로 넣어놓고 생성, 수정하는 데이터라고 보면된다

(생성 , 수정도 한 컴포넌트에서만 이루어지기때문에 자유롭게 생성,수정이 가능하다.)

 

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

예를들어,

<container>

    <imagebanner/>

     <contents1/>

</container>

 

위와같은 구조로 되어있다고 하면 container컴포넌트는 2개의 자식 컴포넌트를 가지고 있는것이다.

이때, container 컴포넌트에는 imagebanner에 사용되는 이미지 경로를 state로 가지고 있다고 가정해보자!

 

그렇다면 imagebanner컴포넌트는 부모 컴포넌트로부터 이미지경로를 전달받아 사용을 해야하는데

부모 컴포넌트로부터 전달받는 데이터를 props라고한다.

props는 내것이 아니기때문에 수정이 불가하다!

 

3. Component 종류

컴포넌트에 대한 종류에대해서는 생김새에 대해 익숙해지도록 보고 넘어가자.

 

- 함수형 컴포넌트

- 클래스형 컴포넌트

4. Component에서 Component로 데이터 넘겨주기

우선 첫번째로 함수형 컴포넌트에는 state가 없다.

나중에 짚고 넘어갈 React hook을 사용하면 함수형컴포넌트에서도 state를 사용할 수 있다.

 

간단하게 어떤식으로 넘겨주는지 정도만 이해하고 넘어가자.

 

참고로, App.js에서 this.변수명 을 쓰면 App.js안에 있는 값을 가져오게된다.

this 키워드는 content객체와도 같아서 함수나 클래스 안에서 사용하면 this를 쓴위치에 해당 하는 값을 가져온다.

 

- state를 넘겨줄때

   <BucketList list={this.state.list}/>

  → 컴포넌트명 , props명 ={넘겨줄 것(리스트, 문자열, 숫자 등등)/}

 

함수형 컴포넌트를 화살표 함수로 선언해줄때  props를 항상 괄호안에 넣는 습관을 들이자

(간혹 적지않아서 props를 못받아서 에러가 발생하면 원인을 찾지못하는경우가 있을수있다고한다.)

 

const BucketList = (props) => {

console.log(props);

 

return (

<div>

</div>
);

}