[React] study (state,) #3일차

📖 참고 서적:

소플의 처음 만난 리액트 

📆  진행

chapter 6 State와 생명주기 ✅

chapter 7 훅 ✅

chapter 8 이벤트 핸들링 ✅

 

---

6. State와 생명주기

🤔State란?

리액트 컴포넌트의 상태,리액트 컴포넌트의 변경 가능한 데이터

💡

렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.

왜? state가 변경되면 컴포넌트가 재렌더링 되기 때문에 성능이 저하된다.

따라서 렌더링과 데이터 흐름에 관련 있는 값만 state에 포함하도록 하며

그 외는 컴포넌트 인스턴스의 필드로 정의한다

 

-특징

자바스크립트의 객체

state를 생성자에서 정의한다

 

직접적인 변경이 불가능하다 -> setState()함수를 사용하여 변경한다.

 

생명주기 (클래스 컴포넌트의 생명주기,Lifecycle method)

출생(mount)-> 컴포넌트의 생성자가 실행되며 state를 정의한다, 렌더링되며 이후 componentDidMount() 호출

 

인생(update)->컴포넌트의 props가 변경되거나 setState()함수 호출에 의해 state가 변경되거나

,forceUpdate()라는 강제업데이트 함수의 호출로 인해 컴포넌트가 다시 렌더링된다 그리고 componentDidUpdate() 호출

 

사망(unmount)->상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때 , 이때 componentWillUnmout()호출

 

컴포넌트가 계속 존재하는 것이 아닌 시간의 흐름에따라 생성,업데이트그리고 사라진다.

 

컴포넌트는 prop이라는 입력데이터가 있고 컴포넌트가 이것을 처리해 return 값을 처리합니다
prop은 컴포넌트를 사용하는 외부자를 위한 데이터
state는 컴포넌트를 만드는 내부자를 위한 데이터

값이 바뀌면 새로운 값이 바껴서 이것이 UI에 반영되게하는것 이때
state를 사용합니다
useState()는 배열을 리턴하고,
0번쨰 값은 상태의 값, 1번째 값은 함수다
그 상태의 값을 변경해주는 함수다!

참고: 생활코딩

 

 

---

7.훅(Hook)

리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것

 

useState()

state를 사용하기 위한 훅

함수 컴포넌트에는 state를 제공하지 않으므로 사용하려면 useState()훅을 사용해야 한다.

-사용법

const [변수명,set변수명]=useState(초깃값);

 

useEffect()

사이드 이팩트를 사용하기 위한 훅

생명주기 함수들과 동일한 기능을 수행할 수 있다.

*사이드 이팩트: 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 작업

-사용법

useEffect(()=>{
	//컴포넌트가 마운트 된 이후,
    //의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨
    //의존성 배열에 빈 배열을 넣으면 마운트와 언마운트 시에 단 한 번 씩만 실행됨
    //의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨

	return()=>{
    	//컴포넌트가 마운트 해제되기 전에 실행됨
    }
},[의존성 변수1, 의존성 변수2,...]);

의존성 배열 안에 있는 변수 중 하나라도 값이 변경되었을때, 이펙트 함수 실행

의존성 배열에 빈 배열을 넣으면 마운트,언마운트 시 한 번만 실행된다.

의존성 배열 생략시, 컴포넌트가 업데이트될 때마다 호출

선언된 컴포넌트의 props와 state에 접근할 수 있다.

리턴하는 함수는 컴포넌트 마운트가 해제될 때 호출됨

 

useMemo()

useCallback()

useRef()

 

훅의 규칙

무조건 최상위 레벨에서만 호출해야한다 (반복문,조건문,중첩함수 안에서 호출하면 안됨)

컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다.

리액트 함수 컴포넌트에서만 훅을 호출해야함

 

커스텀 훅

이름은 use로 시작, 그렇지 않을 경우 훅의 규칙 위반 여부 자동확인 불가능

중복되는 로직을 커스텀 홈으로 추출하여 재사용성 높이기

 

실습코드

import React,{useEffect, useState} from "react";
import useCounter from "./useCounter";

const MAX_CAPACITY=10;

function Accommodate(props){
    const [isFull,setIsFull]=useState(false);
    const [count,increaseCount,decreaseCount]=useCounter(0);

    useEffect(()=>{
        console.log("=====================")
        console.log("useEffect() is called");
        console.log(`isFull:${isFull}`);
    });

    useEffect(()=>{
        setIsFull(count>=MAX_CAPACITY);
        console.log(`Current count value:${count}`);
    },[count]);

    return(
        <div style={{padding:16}}>
            <p>{`총 ${count}명 수용중`}</p>
            <button onClick={increaseCount} disabled={isFull}>입장</button>
            <button onClick={decreaseCount}>퇴장</button>

            {isFull && <p style={{color:"red"}}>정원이 가득찼습니다.</p>}
        </div>
    );
}

export default Accommodate;

 

---

8. 이벤트 핸들링

 

이벤트란?

사용자가 화면에서 하는 사건을 의미 (ex. 버튼 누르기,입력창에 입력하기)

 

-처리

DOM : 이벤트 이름은 모두 소문자, 이벤트를 처리할 함수를 문자열로 전달

React: 이벤트 이름은 카멜 표기법,이벤트를 처리할 할수를 그대로 전달

이벤트 핸들러 : 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수

 

Arguments란?

함수에 전달할 데이터, 파라미터 또는 매개변수

 

-클래스 컴포넌트

arrow function을 사용 또는 bind사용하여 전달

-함수 컴포넌트

이벤트 핸들러 호출 시 원하는 순서대로 매개변수를 넣어서 사용

 

실습코드

import React,{useState} from "react";

function ConfirmButton(props){
    const [isConfirmed,setIsConfirmed]=useState(false);

    const handleConfirm=()=>{
        setIsConfirmed((prevIsConfirmed)=>!prevIsConfirmed);
    };

    return(
        <button onClick={handleConfirm} disabled={isConfirmed}>
            {isConfirmed?"확인됨":"확인하기"}
        </button>
    );
}

export default ConfirmButton;