state, props, 리렌더링

김영진·2022년 7월 27일

TIL

목록 보기

18/29

state란?

props와 state는 일반 자바스트립트 객체이다. 두 객체 모두 렌더링에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다. props는 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리된다.

그러므로 컴포넌트 내부에서 변경하고 싶은 값이 있을 때, state를 활용하면 된다.

함수형 컴포넌트의 state

const App = () => {
  const [state, setState] = useState("초기값");
}

배열 비구조화 할당 문법으로, useState 함수를 호출할 시 배열이 반환되고, 배열이 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어 주는 함수가 된다.

즉 state는 현재 state의 상태가 저장되고, setState는 state를 바꾸어 주는 setter 함수가 된다.

props란?

자식 컴포넌트에게 값을 전달해줘야 할 때, props를 사용한다.

props 기본 사용법

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

부모 컴포넌트에서 자식 컴포넌트로 값을 전달해주고 싶을 때, 자식 컴포넌트 태그에 전달할 값의 이름과 값을 전달해준다. 문자열, 함수, 변수 등을 모두 자식 컴포넌트에 보낼 수 있다.

그럼 자식 컴포넌트에서 값을 받을 땐 어떻게 해야할까?

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

자식 컴포넌트 함수의 인수값을 props로 받는다. props는 객체 형태로 전달 되며 name값을 조회하고 싶다면 props.name을 조회하면 된다.

여러개의 props

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;

여러개의 props를 전달할 수 있다.

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

비구조화 할당(구조 분해)

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

props 내부의 값을 조회할 때마다 props.를 쓰는게 싫다면, 파라미터에서 비구조화 할당 문법을 사용해 props값을 주고 받을 수 있다.

props.children

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;