React - 리액트를 다루는 기술(2)

오늘도 리액트를 다루는 기술 책을보며 React의 기초에 대해서 복습해 본다.

State

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의마한다.
props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이여, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있는 반면 state는 내부에서 값을 바꿔줄 수 있다는 점 이 다르다.

함수 컴퍼넌트에서 useState 사용하기

리액트에서는 state의 기능을 클레스 컴퍼넌트에서만 사용이 가능했다. 하지만 후에 리액트 16.8버전 이후부터는 useState라는 함수를 사용하여 함수 컴포넌트 에서도 사용이 가능하게됬다. useState는 Hooks라는것을 사용하게 되는데 이에 대해서는 후에 Hooks를 배우고 작성할려고 한다.

배열 비구조화 할당

Hooks를 사용하기 전에 (useState를 사용하기 전에) 먼저 배열 비구조화할당에 대해서 알아야한다.
배열 비구조화 할당은 쉽게말해 배열 안에 들어있는 값을 쉽게 추출하는 문법이다.

const array = [1, 2] //해당 배열의 값을 꺼내기위해서는 보통 index를 사용한다.

const one = array[0] // 1
const two = array[1] // 2

const array = [1, 2];
cosnt [onw, two] = array; // 위의 배열을 비구조화 할당으로 꺼내게 되면 해당 문법으로 작성할 수 있다. 바로 array에 담긴 배열의 값을 onw, two 변수에 담아 준 것이다.
 

useState 사용하기

import { useState } from 'react';

• Hooks기능을 이용한 useState 함수 컴포넌트를 import

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

• useState를 사용하기 위해서 배열 비구조화 문법을 사용하였다.
  해당 문법의 해석을 해보자면 message, setMessage의 변수(함수)에
  useState라는 배열의 값을 (index0 과 index1에 위치한) 넣어준 것이다.

• 좀더 세부적으로 말하자면 해당 message는 변수이고 setMessage는 함수이다. 함수인 setMessage는 인자 첫번째 자리에 있는 message라는 변수를 변화 시켜줄 수 있는 함수이다.

• useState('')에서 ()안에 들어가는 ''는 변수인 message의 초기값이 라고 할 수 있다. (초기값 인 이유는 useState를 사용하는 이유가 컴퍼먼트를 변화시켜 주기 위함이기 때문이다.)

    const onClickEnter = () => setMessage('안녕하세요!');
  	const onClickLeave = () => setMessage('안녕히 가세요!');

• 위해서 언급한 setMessage는 message라는 변수를 변경해주기 위한 함수라고했는데 onClickEnter의 함수에서 선언한 것을 보면 setMessage('text')에서 ()안에 들어가는 값이 ''이였던 message를 'text'로 변화시켜 준다.(= (값)의 값으로 바꿔준다는 뜻이다.)

  return (
    <div>
    	<button onClick={onClickEnter}>입장</button>
		<button onClick={onClickLeave}>퇴장</button>
		<h1>{message}</h1>
	</div>
	)
}

export default Say;

• 위에서 선언하고 만든 함수와 state를 이용해서 butotn element에 onClick 이벤트 속성의 값으로 onCliockEnter, onClickLeave 함수를 넣어주게 되면 onClick이라는 이벤트가 발생했을때 해당 함수의 로직인 setMessage()가 실행되게 되는것 이다.

결과 화면