[React]전달받은 props로 state값을 초기화

React는 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 구조로 되어있습니다.

그리고 컴포넌트에서 사용되는 값의 상태는 state와 props로 분류가 됩니다.

state
현재 컴포넌트에서 사용하는 값(수정 가능)

props
부모 컴포넌트에게 전달받은 값(수정 불가능)

이번 포스팅에서는 state를 부모 컴포넌트에게 전달받은 값인 props로 초기화하는 방법에 대해 작성합니다.

 

StackOverFlow의 아래 질문을 질문을 참고하여 작성합니다.

https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props

React component initialize state from props

---

질문의 문제점

질문자의 코드입니다. 아래 코드에서 문제점은 state를 생성자(constructor)에서 초기화하지 않고 componentDidMount()에서 setState로 변경합니다.

componentDidMount()에서 setState를 호출하는 경우 추가적인 렌더링이 발생하는 문제가 발생합니다.

※ setState는 state를 초기화하는 역할이 아니라 변경하는 역할입니다.

import React from 'react'

class FirstComponent extends React.Component {

  state = {
    description: ''
  }

  componentDidMount() {
    const { description} = this.props;
    this.setState({ description });
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} /> 
    );
  }
}

export default FirstComponent;

---

Class기반의 컴포넌트

생성자 constructor에서 스프레드 연산자(...)를 사용하여 state의 값을 props의 값으로 초기화합니다.

즉, props의 모든 값이 state에 복사됩니다.

import React from 'react'

class FirstComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      ...props
    }
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} /> 
    );
  }
}

export default FirstComponent;

전체 props가 아닌 props의 일부만 state로 초기화하고 싶은 경우 아래와 같이 작성합니다.

this.state.x와 this.state.y는 전달받은 props의 값으로 초기화하고 this.state.z는 빈 값('')으로 초기화하는 방법입니다.

constructor(props) {
  super(props);

  this.state = {
    x: props.initialX,
    y: props.initialY,
    z: ''
  }
}

---

Hook기반의 컴포넌트

전달받은 props의 값을 nameState에 useState()를 사용하여 초기화합니다. 

import React, {useState , useEffect} from 'react'

const FirstComponent = (props) => {
  const [nameState, setNameState] = useState(props)
  
  return (
    <input type="text" value={nameState} /> 
  );
}

export default FirstComponent;

props의 특정 값만 state로 사용하고 싶은 경우 아래와 같이 작성하면 됩니다.

const [xState, setXState] = useState(props.initialX);
const [yState, setYState] = useState(props.initialY);
const [zState, setZState] = useState('');