[React] props & state

JSX로 Component를 만들고, 조합하거나 재사용하여 복잡한 UI를 만들 수 있습니다.
React는 이를 가능하게 합니다.

props

properties (속성들)

props를 통해 컴포넌트에서 컴포넌트로 데이터를 전달할 수 있습니다.

function App() {
  const renderSquare = (i)=> {
    return <Square value = i />;
  }
}

이전 글에서 컴포넌트가 반환하는 React Element가 HTML로 실제 문서에 들어가는데,
작성하는 JSX가 HTML과 유사하여 편하다고 하였습니다.

props 역시 다른 컴포넌트에 데이터를 전달할 때, HTML의 속성과 유사하게 작성합니다.

속성이 추가된 컴포넌트는 데이터를 전달 받습니다.

Class component

this.props로 사용합니다.

class Square extends React.Component{
  render() {
    return (
      <div> {this.props.value} </div>
    )
  }
}

Function component

매개변수로 전달받습니다.

function Square({value}) {
  return <div>{value}</div>
}

state

리액트는 component가 상태를 갖고, 스스로 관리할 수 있도록 합니다.
component가 무언가를 기억하기 위해 state(상태)를 사용합니다.

생성자에 this.state를 설정하는 것으로 state를 가질 수 있습니다.

class Square extends React.Component{
  constructor(props) {
    this.super(props);
    this.state = { value : null};
  }
  
  render() {
    return (
      <div 
        onClick ={e=>this.setState({value:'X'})}
      > {this.state.value} </div>
    )
  }
}

component는 state를 가지고,
클릭하면 this.state.value가 'X'로 바뀌게 됩니다.

다만, 실제로 내용이 변경되기 위해서는 다시 렌더링 해야하는데,
직접 this.state를 변경하지 않고, this.setState를 호출하는 이유가 이 때문입니다.

state를 변경할 때는, this.setState를 호출해야 합니다.

setState

this.setState에 인자로 객체 대신, 콜백을 전달할 수 있습니다.
콜백에 전달된 state,props인자는 최신값임이 보장됩니다.

setState는 항상 즉각적으로 갱신하는 것이 아니라서,
setState에서 this.state를 사용한다면, 잠재적인 문제가 될 수 있습니다.

Function component state

Function component에서 state를 사용하려면 hooks를 사용해야 합니다.

hooks에 대해 작성한 게시글이 있습니다.
React Hooks