[React] Props, State 사용하기

Props

부모 컴포넌트에서 자식 컴포넌트로 전달하고 싶은 데이터를 전달합니다.

App.js

import Test from './Test';

function App() {

  return (

    <div>

      <Test test1={'test1_val'} test2={'test2_val'}></Test> // Test 컴포넌트에 데이터 전달

    </div>

  );

}

export default App;

Test.js

function Test(props) {

  return (

    <div>

      {console.log(props)} // {test1: 'test1_val', test2: 'test2_val'}

    </div>

  );

}

export default Test;

 

 

State

함수 내에 선언한 변수처럼 컴포넌트 안에서 데이터를 저장, 수정할 수 있습니다.

useState라는 함수를 사용해서 상태 관리를 할 수 있습니다.

기본 형태

const [value, setValue] = useState(initialValue);

◆ value

• 데이터를 저장하고 있는 변수

◆ setValue

• value값을 변경해주는 함수

◆ initialValue

• 초기값

 

App.js

import { useState } from "react"; // useState를 사용하기 위해서 import

function App() {

  const [val, setVal] = useState(1); // useState 사용

  let printAndChange = () => { // val값을 출력하고 1 더하는 함수

    console.log(val);

    setVal(val+1); // val 값을 val + 1로 변경

  }

  return (

    <div>

      <button onClick={printAndChange}>add 1</button> // 이벤트가 발생할 버튼

    </div>

  );

}

export default App