React - state, props

React - state

React에서 컴포넌트의 상태를 값으로 저장하는 방법으로 state를 사용합니다.
state는 컴포넌트 내에서 정의하고 사용되며 변수의 형태로 원하는대로 변경될 수 있습니다.

1. 함수형 컴포넌트에서 state 사용하기

import React, { useState } from 'react'; //import 철수
function Parents() {
  let [name, setName] = useState(); //state

  return (
    <div>
      <h1>state 사용해보기</h1>
      <h3>{name} 야 밥먹어라</h3>
    </div>
  );
}
export default Parents;

• 함수형 컴포넌트에서 state를 사용할때는 useState Hook을 사용합니다.
• state를 사용하기 위해서는 useState를 import해야합니다.
• 배열의 형태로 선언되며 첫번째 요소는 state의 이름, 두번째 요소는 state를 조작할 함수명을 선언합니다.
• useState 함수에 state의 초기값을 인자로 넣습니다.
• 위의 코드에서는 state의 이름으로 name을 name이라는 state를 조작할 함수를 setName으로 정의했습니다.
• 위 코드의 name state에는 아무런 값이 정의되어있지 않아 h3태그에 이름이 나타나지 않을 것입니다.
• 그렇다면 name state에 원하는 이름을 넣고싶다면 어떤 방법을 사용해야 할까요?

2. state 내용 변경하기

비어있는 name state의 내용을 변경하고 싶다면 setName함수를 사용합니다.

state를 사용해 상태값을 설정하는 이유는 컴포넌트내의 요소가 상태값을 반영하여 데이터가 바뀔때 효율적으로 UI에 변경사항을 표현하기 위함입니다.

state를 조작하는 함수를 사용해 동적으로 state를 변경하는 방법에 대해 알아보겠습니다.

import React, { useState } from 'react'; //import 철수
function Parents() {
  let [name, setName] = useState(''); //state

  const callName = () => {
    setName('철수');
  };
  return (
    <div>
      <h1>부모 컴포넌트 입니다.</h1>
      <button onClick={callChild}>밥먹으라하기</button>
      <h3>{name} 야 밥먹어라</h3>
    </div>
  );
}
export default Parents;

• setName함수에 '철수' 라는 문자열을 인자로 입력하는 callName 함수를 추가했습니다.
• 클릭 이벤트를 받는 버튼을 생성해 클릭시 callName함수가 실행되도록 하였습니다.
• 만약 버튼이 클릭되면 setName함수가 실행되고 name state는 '철수' 라는 문자열을 상태로 지니게 됩니다.
• 버튼이 클릭되면 h3태그의 {name} 부분에 철수 라는 문자열이 나타나게 됩니다.

위의 예시에서 보았듯이 state는 원하는 state를 설정해 컴포넌트에 반영하여 해당 state에 반영해 컴포넌트의 조작을 UI에 반영하기 위해 사용합니다.

3. 부모 컴포넌트에서 자식 컴포넌트에게

리엑트에서 페이지를 제작하다보면 컴포넌트를 효율적으로 관리하기 위해 해당 컴포넌트의 자식으로 여러 컴포넌트를 가지게 될것입니다.
부모컴포넌트에서 자식에게 원하는 정보를 전달하고 싶을때는 props를 사용합니다.

props는 부모컴포넌트로부터 자식컴포넌트로 데이터를 전달할 때 사용하며 부모컴포넌트가 넘겨준 정보를 객체형태로 지니고 있습니다.

// ** Parents 컴포넌트 **
import React, { useState } from 'react';
import Child from './Child';
function Parents() {
  let [name, setName] = useState('');

  const callChild = () => {
    setName('철수');
  };
  return (
    <div>
      <h1>부모 컴포넌트 입니다.</h1>
      <button onClick={callChild}>밥먹으라하기</button>
      <Child name={name} />
    </div>
  );
}
export default Parents;

// ** Child 컴포넌트 **
import React from 'react';

function Child(props) {
  return (
    <div>
      <h2>자식 컴포넌트 입니다.</h2>
      <h3>{props.name} 야 밥먹어라</h3>
    </div>
  );
}
export default Child;

• Parents컴포넌트의 h3태그를 Child 컴포넌트로 컴포넌트화시켜 자식 컴포넌트로 추가했습니다.

• <Child name={name} /> 다음과 같이 name이라는 프로퍼티로 name state를 전달 했습니다.

• Child 컴포넌트의 인자로 props를 받아줍니다.

• props에는 부모 컴포넌트에서 넘겨준 name state 정보를 담고있습니다.

• props.name 과 같은 형태로 props 객체를 사용 할 수 있습니다.

기존 자식 컴포넌트가 없이 하나의 컴포넌트로 만든 코드처럼 처음에는 이름이 나타나지 않지만 버튼을 클릭할시 "철수 야 밥먹어라" 라는 문자열이 화면에 나타나게 됩니다.

위 코드에서는 name state를 자식 컴포넌트에게 props로 전달 했기때문에, 자식 컴포넌트가 name state를 컴포넌트 내에 가지고 있지 않아도 state의 변경이 동일하게 반영되는 모습을 확인 할 수 있습니다.

state와 props는 리엑트의 핵심인 컴포넌트 조작에 가장 많이 사용되는 개념이기 때문에 충분이 익숙해 지는것이 중요하다고 여겨집니다.