React state & props

이번 글에서는 React의 state와 props에 대해서 공부한점을 정리하려합니다.

React에서 데이터바인딩과 관련된 중요한 데이터를 저장할 때 변수 선언 대신 state를 만들어서 사용합니다.

왜 state를 만드는가?

결론부터 말하자면 state를 사용하는 이유는 변수가 변경될 때 자동으로 관련된 HTML을 재렌더링 시키기 위해서이다.

React는 state 수정이 일어나면 state가 포함된 HTML을 자동으로 재렌더링하기 때문이다.

(일반 변수는 변경이 발생해도 자동으로 재렌더링하지 않는다.)

state는 어떻게 만들고 사용하는가?

import React, { useState } from 'react';
import './App.css'

function App(){
 
  let [a,b] = useState('react');

  return (
    <div className="App">
      <div className="list">
        <p>React State에 대해 알아봅시다.</p>
      </div>
    </div>
  )
}

다음과 같이 { useState }를 import한 다음 useState(저장할 데이터)라는 함수를 하나 만든다.

ES6 destructuring 문법을 이용하여 각각 a와 b라는 변수명으로 저장한다.

a라는 변수에는 실제 저장할 데이터가, b에는 저장할 데이터를 변경시키는 함수가 들어간다.

(a = 'react' , b = 'react'를 변경시키는 함수)

만든 state를 기존 변수와 동일하게 데이터 바인딩한다.

import React, { useState } from 'react';
import './App.css'

function App(){
 
  let [a,b] = useState('react');

  return (
    <div className="App">
      <div className="list">
      	<h3> {a} </h3> // react
        <p>React State에 대해 알아봅시다.</p>
      </div>
    </div>
  )
}

state에는 Array, Object도 들어갈 수 있다.

import React, { useState } from 'react';
import './App.css'

function App(){
 
  let [language,setLanguage] = useState(['Java', 'Javascript']);

  return (
    <div className="App">
      <div className="list">
      	<h3> {language[0] } </h3> // Java
        <h3> {language[1] } </h3> // Javascript
        <p>React State에 대해 알아봅시다.</p>
      </div>
    </div>
  )
}

props란 무엇인가?

위에서 만든 state를 다른 컴포넌트(하위 컴포넌트)에서 사용하고 싶을때, state를 사용하고싶은 컴포넌트로 전송해서 사용할 수 있도록 도와주는 것이다.

간단하게 App이라는 컴포넌트 안에 Modal이라는 컴포넌트가 있을때 App컴포넌트에 있는 state를 Modal 컴포넌트로 가져와 사용하는 방법을 알아보자.

function App (){
  let [menu, setMenu] = useState(['pizza', 'chicken', 'kimchi']);
  return (
    <div>
      ...
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h2>음식 { menu[0] }</h2>
    </div>
  )
}

// props를 모르고 단순히 App 컴포넌트 state를 Modal로 가져가 사용하려하면 에러가 발생한다

----------------------------------------------------------------------------------------

function App (){
  let [menu, setMenu] = useState(['pizza', 'chicken', 'kimchi']);
  return (
    <div>
      ...
      <Modal menu={menu}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h2>음식 { props.menu[0] }</h2>
    </div>
  )
}

props 문법은 다음과 같이 3가지 단계를 따라줘야 작동한다.

<전송받을 자식 컴포넌트 전송할state이름={state명}> </~>
전송받을 자식 컴포넌트를 선언하는 function 파라미터(props) 만들기
props.전송할state이름 으로 사용
props의 단점은 전달 받은 state는 변경할 수 없으며 state를 선언한 곳에서만 변경할 수 있다.

또한 자식 컴포넌트가 무수히 많을 경우 계속 props문법으로 전달해야하는 불편함이 있다.

이러한 단점을 보완하기위한 Context API와 Redux라는게 존재한다.