[React] - 6) state(함수형 컴포넌트)

velopert 님의 '리액트를 사용하는 기술' 교재로 부터 공부한 내용임을 밝힙니다😃

state

 

안녕하세요, 오랜만에 리액트 포스팅입니다.

 

회사일을 병행하면서도 꾸준히 업로드하겠다고 했던 리액트 포스팅이 늦어지게 된 이유는, 학교 동아리에서 진행하는 해커톤 준비에 열을 쏟아야 했기 때문이었습니다. ㅠㅠ

 

이제는 해커톤 행사가 끝났기 때문에 리액트 (+스프링?)와 Mac에 대한 포스팅을 주로 올리게 될 것 같아요.

 

자, 그럼 시작할게요!

 

---

 

저번 포스팅에서는 props에 대해 알아보았는데요.

 

props는 부모 컴포넌트가 설정하여 렌더링할 데이터를 전달해주는 것이라고 했었는데, state는 약간 다릅니다.

 

state는 꼭 부모 컴포넌트로부터 전달받는 것이 아닌, 컴포넌트 자체적으로 지닌 값으로, 컴포넌트 내부에서도 값을 업데이트 할 수 있습니다.

 

state는 함수형 컴포넌트에서도, 클래스형 컴포넌트에서도 다룰 수 있지만 오늘은 함수형 컴포넌트로 배워 볼게요.

 

 

기본적으로 state를 함수형 컴포넌트에서 사용할 때는 useState를 사용합니다. ( **리액트 16.8 이후 버전부터! )

 

 

import React, { useState } from 'react';

const App = () => {
    const [message, setMessage] = useState('');
    const onClickHi = () => setMessage('안뇽!');
    const onClickBye = () => setMessage('잘가!');
    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1>{message}</h1>
        </div>
    );
};

export default App;

 

 

우선 useState의 import가 필요합니다!

 

const [message, setMessage] = useState('');

const [message, setMessage] = useState('');

 

이 코드는 자바스크립트의 비구조화 할당 문법을 이용한 부분인데요. 이렇듯 함수형 컴포넌트는 state를 useState함수를 통하여 state를 사용해 주어야만 합니다.

 

그리고 이 state에 message와 setMessage를 저장해놓고, 화살표 함수인 onClickHi와 onClickBye를 통해 message의 값을 바꾸어주는 예제입니다.

 

 

이제 yarn server로 구동하였을 때,

 

버튼 클릭에 따라 메시지의 내용이 바뀐다면 성공입니다!