React 컴포넌트 / props / state 에 대해서 알아보자

컴포넌트

컴포넌트는 프로그래밍적인 의미로 재사용 가능한 각각의 독립된 모듈을 말한다.   
즉, 효율적인 협업과 생산성을 높이는 성능 최적화 시스템 구현을 가능하게 한다.

 

명명규칙

컴포넌트명은 항상 대문자로 시작해야 하고, props(속성) 임의 값을 전달받아 화면에 표시하는 React element를 반환한다.

 

 

컴포넌트 선언

1. 클래스형 컴포넌트
state / 생명주기 활용 가하고, render() 함수를 반드시 선언해야 한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default App;

 

2. 함수형 컴포넌트

state / 생명주기 활용 불가능했지만, Hooks 를 통해 가능해졌다.   

import React from 'react';

const App = () => {
  return (
    <div>
      
    </div>
  );
};

export default App;

 

 

pros

컴포넌트 속성을 설정할때 사용하며, 입력값을 변경하지 않고, 항상 동일한 입력값에 대해 동일한 결과를 반환하는 순수함수 형태여야 한다.

props 값을 지정하거나, 기본값을 미리 설정할 수 있고, ES6부터 비구조화할당 문법을 통해 간결하게 선언 가능하다.

# src/App.js
import React from 'react';
import SubComponent from './SubComponent';

const App = () => {
  // 상황1. SubComponent의 props 지정
  return (
    <div>
      <SubComponent name='홍길동' age='12' />
    </div>
  );

  // 상황2. SubComponent 만 선언
  return (
    <div>
      <SubComponent />
    </div>
  );
};

export default App; 
   
   
# src/SubComponent.js
import React from 'react';

// 상황1. SubComponent의 props 지정
const SubComponent = ({ name, age }) => {
    return (
        <div>
            이름: {name} <br />
            나이 : {age}
        </div>
    );
};

// 상황2. 기본값 선언
SubComponent.defaultProps ={
   name: '테스트',
   age: 0
};


export default SubComponent;

 

 

state

컴포넌트 내부에서 갱신될 수 있는 값으로 컴포넌트에 의해 제어된다.   
클래스형 컴포넌트 state 와 함수형 컴포넌트 Hooks useState로 구분된다.   
state값을 갱신할때는 setState 또는 useState를 통해 전달받은 함수에서  처리해야 한다.   

 

 

클래스형 컴포넌트 - state

생성자를 선언 시, super(props)는 반드시 선언해야 한다.   
생성자를 선언하지 않고 state 를 선언할 수 도 있다.

import React, { Component } from 'react';

class SubComponent extends Component {

    // 상황1. 생성자 선언할 경우
    constructor(props) {
        super(props);

        this.state = {
            age: 0
        };
    }

    // 상황2. 생성자 선언하지 않을 경우
    state = {
        age: 0
    };

    render() {
        return (
            <div>

            </div>
        );
    }
}

export default SubComponent;

 

 

클래스형 컴포넌트 - setState

컴포넌트의 state 객체를 갱신하고, 컴포넌트는 리렌더링 된다.   
setState는 비동기적으로 작동하며 setState 이후, this.state 에 바로 반영될 거라 생각할 수 있다. 하지만 그렇지 않다!   

// this.state 값에 반영되지 않는다.
incCount() {
  this.setState({count: this.state.count + 1});
}
```

이유는 React는 리렌더링하기 전까지 대기 상태이기 때문이다.
그렇기때문에, setState를 통해 state 값을 사용할 수 있게 보장하려면, setState로 객체 대신 함수를 사용하면 즉시 state 값을 보장 받을 수 있다.   
```javascript

incCount() {
  this.setState((state)=>{
   return {count: state.count + 1}
  });
}

 

 

함수형 컴포넌트 - Hooks::useState

우선, 함수형 컴포넌트에서는 state 를 사용할 수 없다.   
하지만, 버전 업데이트 이후, Hooks 를 통해 useState 라는 함수를 이용하여 state를 사용할 수 있다. 

// statea : 현재상태 , setState : state 갱신 함수
const [state, setState] = useState(initialState);

const [count, setCount] = useState(0);
   return (
       <div>
           <p>{count}</p>
           <button onClick={() => setCount(count - 1)}>-</button>
           <button onClick={() => setCount(count + 1)}>+</button>
       </div>
);