[React] Hook & State & Props

devJisun·2025년 2월 4일

Hook

컴포넌트의 *lifecycle(라이프사이클), state(상태)를 관리하기 위한 함수.

*lifecycle? 컴포넌트가 화면에 노출되는게 마운트, 사라지는게 언마운트라고 하는데 이런 일련의 과정을 라이프 사이클이라고 한다. 즉 첫번째 페이지에서 두번째 페이지로 옮겨간다고 했을때 첫번째 페이지에서 컴포넌트가 마운트됐다가 언마운트 되는 과정을 라이프 사이클이라고 한다.

컴포넌트에는 1) 클래스 컴포넌트 2) 함수 컴포넌트가 있는데
리액트 초창기에는 라이프사이클과 상태 관리 기능을 클래스 컴포넌트에만 사용할 수 있었다. 그러나 개발자들은 선언하기도 편하고 메모리 자원을 덜 사용하는 함수 컴포넌트 사용을 선호하였고 클래스 컴포넌트를 쓸때는 에러를 처리하기가 까다로운 측면이 있었다.

그러나 라이프사이클과 상태 관리 기능을 함수 컴포넌트에도 적용할 수 있는 Hook의 등장으로 함수 컴포넌트가 주로 쓰이게 되었다. BUT! 아직도 클래스 컴포넌트로 된 코드가 많기 때문에 추후 유지보수 업무를 위해서는 클래스 컴포넌트 방식도 잘 이해해둬야 한다.

Hook 의 특징과 사용 규칙

React는 useState와 같은 내장 Hook들을 제공 하며, 직접 Hook을 custom하는 것도 가능하다.

import React, { useState } from 'react';
:: useState Hook을 리액트에서 불러옴

Hook의 사용 규칙을 알아보자

Hook은 클래스 컴포넌트 안에서는 동작 안함
함수 컴포넌트 내에서, custom Hook 내부, 최상위에서 호출해야함
자바스크립트 함수 내에서 사용할 수 없음(최상위에서 호출해야하기 때문에)

최상위 호출 예시

React가 여러 Hook들을 구분할 수 있는 유일한 정보는 Hook이 사용된 순서.
조건문, 반복문, 중첩된 함수 내에서 호출하면 에러 발생.

import React, { useState } from 'react';

const Test = () => {
	const [color, setColor] = useState('red'); //최상위 레벨
    
    if(5 > 3) {
    	console.log("true");
    };
    
    return (
    	<div> Hello! </div>
    );
};

export default Test;

State

컴포넌트가 UI 뿌리려고 하는 정보를 결정하는 상태값.
[ state, setter함수 ] 순으로 호출하여 컴포넌트에서 바뀌는 값을 관리할 수 있다.
*setter 함수는 setColor, setName 등 set+state로 표기됨.

import React, { useState } from 'react';

const Main = () => {
 const [color, setColor] = useState('red'); //useState('초기값')
 
 return (
 	<h1 style={{background : color}}> 여기는 메인페이지입니다</h1>
    <button onClick={() => setColor('blue')}> 색상변경 </button> //color값 재할당
 );
};

export default Main;

Props

컴포넌트의 속성값, 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체(Object). 부모 포넌트에서 자식 컴포넌트로 데이터 전달할 때, 자식 컴포넌트에서 부모 컴포넌트로 부터 쓰인 전달 받은 데이터를 적용할 때 쓰임.
(변수, 함수, state, eventHandler 등 어떤 값이든 넘겨줄 수 있고 어떤 데이터 타입이든 넘겨줄 수 있다)

부모 컴포넌트에서 데이터전달

태그에 속성을 주입하듯 자식 컴포넌트에 전달하고자 하는 데이터 추가
<Child pet={animal} englishName='tiger' />

넘겨주고자 하는 값이 둘 이상이라면 넘겨주고자 하는 값 사이를 띄워줌으로써 구분을 해주고 원하는 만큼 추가하면 된다.

import React from 'react';
import Child fromt './Child';

const Parent = () => {
	const animal = '호랑이';
    
    return (
    	<>
        	<h1>부모 컴포넌트입니다.</h2>
            <p>{animal}</p>
            <Child pet={animal} englishName='tiger' />
        </>
    );   
};

export default Parent;

자식 컴포넌트에서 부모 컴포넌트로 부터 전달받은 데이터 적용하기

import React from 'react';

const Child = (props) => { // 부모 컴포넌트로부터 받은 props를 명시적으로 나타내는 컨벤션
	console.log(props);    //{pet: '호랑이', englishName : 'tiger'}
	
    return (
    	<>
        	<h2>자식 컴포넌트입니다.</h2>
            <p>{props.pet}</p> //호랑이
            <p>{props.englishName}</p>  //tiger
        </>
    );
};

export default Child;

Props & State 함께 써보기

State 전달

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

const Parent = () => {
	const [color, setColor] = useState('red');
   
	const changeColor = () => {
    	setColor('blue');
    };
    
    return (
    	<>
        	<div>부모 컴포넌트 입니다.</div>
            <Child color={color} change={colorChange} />
        </>
    );
}

State 적용

setState는 부모 컴포넌트에만 있는데 자식 컴포넌트에서는 state를 어떻게 변경하지?
자식 컴포넌트에서 state를 변경해보자.

//Child.js

import React from 'react';

const Child = (props) => {
	console.log(props);
    
    return (
    	<>
        	<div>자식 컴포넌트입니다.</div>
            <p>{props.color}</p>
            <button onClick={props.change}>색상바꾸기</button>
        </>
    );
};

export defualt Child;