📘 React 공부하기 | component 만들기, props와 state 개념

 

 

 

함수형 컴포넌트 vs 클래스 컴포넌트 

컴포넌트는 자바스크립트의 함수처럼 하나의 기능을 하는 단위라고 생각하면 될 것 같다. 하나의 컴포넌트는 하나의 커스텀 태그의 역할을 한다. 

 

컴포넌트는 함수형으로, 클래스형으로 작성할 수 있다. 

 

 

 

함수형 컴포넌트 

함수 컴포넌트로 <App /> 태그를 만들었다. 이 컴포넌트는 index.js에서 사용하고 있고, <App name="wow" />로 name이라는 props를 넘겨주고 있다. 

 

props를 받기 위해서는 App에서 props를 인자로 받아야한다.

 

 

 

 

클래스 컴포넌트 

ES6 class를 사용하여 컴포넌트를 정의할 수도 있다. 

 

 

어떻게 Hello, wow가 화면에 렌더링 되게 되는 것일까?

1. <App name = "wow" /> 엘리먼트로 ReactDOM.render()를 호출하게 된다. 

2. React는 {name : "wow"} 를 props로 하여 App 컴포넌트를 호출한다. 

3. App 컴포넌트는 결과적으로 <h1> Hello, wow <h1> 엘리먼트를 반환하게 된다. 

4. React DOM은 <h1> Hello, wow <h1> 엘리먼트와 일치하도록 DOM을 업데이트한다. (Virtual DOM)


주의할 점은 컴포넌트의 이름은 항상 대문자로 시작해야한다. <app> (x) -> <App> (o)

 

 

함수 컴포넌트와 클래스 컴포넌트의 차이점

1. 함수 컴포넌트에서는 hook을 사용하지 않는한 state를 가질 수 없다.

2. 클래스 컴포넌트에서는 render함수를 사용해야한다. 

 

 

 

 

 

Props 

props는 속성을 나타내는 데이터이다.

 

- 부모 컴포넌트에서 자식 컴포넌트로 상속할 수 있음

- 부모 컴포넌트에서만 props수정이 가능하다.

 

위의 코드로 예를 들면, name="wow" 라는 속성은 부모 컴포넌트인 index.js에서 자식 컴포넌트인 <App /> 으로 상속되는 속성이다. 이 props는 오직 index.js에서만 수정이 가능하고, <App />에서는 수정이 불가하다. 

 

즉, Props는 읽기 전용이다

 

 

State

state는 변할 수 있는 값이다.

 

현재 내가 20살이라면 this.state = {age : 20} 이라고 표현할 수 있고, 이 값은 해가 지나면 변하는 값이다. 

 

 

간단하게 button을 눌러서 +, -를 할 수 있는 컴포넌트를 만들어보았다. 여기서 constructor를 보면 this.state = {value : 0} 이 들어가 있는 것을 볼 수 있다. 

 

state는 props와 다르게 constructor안에 캡슐화 그리고 은닉화되어있다. 또, 컴포넌트에 의해 완전히 제어된다.(값 변경이 가능)


state와 props의 가장 큰 차이점은 state는 나이와 같이 내부적으로 변할 수 있는 값이고,  props는 이름처럼 외부로부터 받은 변할 수 없는 값이다(일반적으로).

 

 

 

 

setState() 사용 이유 (React Immutable)

state를 변경하기 위해서는 반드시 this.setState를 사용해서 state를 변경해주어야한다. 
this.setState로 state를 변경하지 않는다면 아무리 state값을 변경하더라도 render()를 재호출하지 않는다. 그래서 state를 바꾸더라도 리액트는 state가 변경된지 알지 못한다. 

 

setState를 호출하면 리액트는 자동으로 state를 업데이트한다(자식 컴포넌트에 있는 state들도).