[포스코x코딩온] 웹개발자 풀스택 과정 12주차 | State, Hook, LifeCycle

구준희·2023년 9월 22일
React[포스코X코딩온]
0

[포스코x코딩온]교육

목록 보기
30/40
post-thumbnail
post-custom-banner

state와 setState

📌 state란?

  • 리액트에서 이벤트에 의해 변경되는 동적인 값
  • 버튼을 클릭하는 onClick 이벤트, input 입력으로 인해 발생하는 onChange 이벤트에 의해 입력값이 변경된 경우 사용된다.
  • props는 부모 컴포넌트가 설정하는 값이며 읽기전용이지만 state는 하위 컴포넌트도 데이터를 변경할 수 있다.
  • setState 메서드를 사용하여 상태를 변경할 수 있다.

❓ 왜 사용할까?

state의 값이 변경될 때 자동으로 재랜더링이 되기 때문에 변수 대신에 사용한다.

🤼‍♂ state vs props

  • props : 부모 컴포넌트에서 자식 컴포넌트에 데이터 전달 시 사용(읽기모드)
    React는 단방향 데이터 흐름

  • state : 특정 컴포넌트가 갖는 상태(값)
    컴포넌트 내부에서 선언되고 내부에서 값을 변경함

stateProps
유스케이스뷰에 렌더링돼야 하는 컴포넌트의 데이터를 저장하는데 사용데이터, 이벤트 핸들러를 자식 컴포넌트에 전달하는데 사용
가변성상태는 데이터를 보유하고 시간이 지남에 따라 변경가능props는 바뀔 수 없다. 한 번 설정되면 props를 변경할 수 없음
업데이트이벤트 핸들러는 일반적으로 state를 업데이트 함상위 컴포넌트는 하위 컴포넌트에 대한 props를 설정

📃 사용방법

import {useState} from "react";

const App = () =>{
  const[value, setValue] = useState(초기값);
  return...
}
  • state의 값을 변경하기 위해서는 반드시 setState 함수를 이용
  • state 값을 임의로 변경해서는 안됨

📃 state를 변경하는 방법

// 1. setState 내에 변경할 값을 넣기
const [count, setCount] = useState(0);
setCount(count + 1);

// 2. setState에 함수를 넣기
const [count, setCount] = useState(0);

setCount((current)=>{
  return current + 1
)}

🚨 주의할 점

  • state는 원칙적으로 클래스형 컴포넌트에서만 사용가능
  • this.state를 사용하지 않고 setState로 값을 변경
  • setState는 비동기적으로 동작하므로, 이전 상태를 기반으로 다음 상태를 계산할 때 함수 형태의 setState를 사용

📌Hook

📖 React Hook의 등장배경

리액트 컴포넌트는 함수형 컴포넌트(Functional Component)와 클래스형 컴포넌트(Class Component)로 나뉜다.

리액트 초기에는 일반적으로 함수형 컴포넌트(Functional Component)를 사용하였으나, 값의 상태를 관리(state)혹은 Life Cycle Method(생명주기)를 사용하여야 할 때에만 클래스형 컴포넌트를 사용하였다.
특수한 경우를 제외하고는 클래스형 컴포넌트를 사용하지 않았는데 그 이유는 클래스형 컴포넌트의 단점 때문이다.
1. 코드의 구성이 어렵고 Component의 재사용성이 떨어짐
2. 컴파일 단계에서 코드 최적화를 어렵게 함
3. 최신 기술의 적용이 효과적이지 않음

이러한 클래스형 컴포넌트의 단점을 보완하여, 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능들을 사용할 수 있게 한 것이 바로 React Hook이다.

❓ React Hook이란?

  • 리액트 v16.8에 새로 도입된 기능으로, 함수형 컴포넌트에서 사용되는 몇가지 기술들을 일컫는다. 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주며 대표적인 예로는 useState,useEffect가 존재한다.

📚 React Hook의 규칙

  1. 반복분, 조건문 혹은 중첩된 함수 내에서 호출하면 안되며 반드시 최상위에서만 Hook을 호출해야 한다. 또한 Hook은 랜더링 시 항상 동일한 순서로 호출 되어야 한다.

  2. Hook은 React 함수 내에서만 호출해야 한다. 즉, 리액트 Hook은 함수형 컴포넌트에서 호출해야 하며, 추가적으로 custom hook에서도 호출이 가능하다.

  3. custom hook 이름은 "use"로 시작한다.(권장사항)

📄 대표적인 React Hook

  1. useState
    useState는 Component 상태값을 추가할 때 사용되며, 클래스형 컴포넌트에서만 사용 가능하던 state를 함수형 컴포넌트에서도 사용 가능 하도록 한 대표적인 기능이다.
const[변수명, 상태를 업데이트할 변수명] = useState(초기값)
예시)
const[status, setStatus] = useState("example");

  1. useEffect
    useEffect는 화면이 랜더링 될 때마다, 특정 작업을 실행할 수 있도록 하는 Hook이다.
    (자세한 내용은 뒤에서 설명)

  2. useReducer
    useReducer는 이 전 상태와 Action을 결합하여, 새로운 상태값을 만든다. 일반적으로 React에서 상태관리를 위해 사용하는 Hook은 useState지만, 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용 할 수 있다.

이 외에도

  • useContext : 리액트 전역적으로 접근 가능한 데이터나 함수를 관리하고, 필요한 컴포넌트에서 그 값을 가져와 바로 사용할 수 있게 도와주는 훅
  • useMemo : 메모리제이션을 통해 함수의 리턴 값을 재사용할 수 있게 해주는 훅
  • useCallback : 함수를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅
  • useRef : 참조(reference)를 생성하고 관리할 수 있는 훅(DOM접근, 변수보존 등)

🔄 Life Cycle

❓ LifeCycle이란?

리액트는 컴포넌트 단위로 개발하게 되는데 이 때 각 컴포넌트들은 라이프사이클 즉, 생명주기를 가지고 있다. 생명주기는 생성부터 시작하여 업데이트가 되기도 하며 마지막에는 소멸되는 과정을 거치게 된다.
클래스형 컴포넌트에선 주로 생명주기 메서드를 통해 라이프사이클에 따라 컴포넌트를 조작하는데 이와달리 함수형 컴포넌트에서는 생명주기 메서드가 따로 존재하지 않기 때문에 리액트 훅을 사용하여 생명주기 메서드와 비슷하게 동작하도록 구현한다.

  • Mount : DOM이 생성되고 웹 브라우저 상에 나타남
  • Update : props or state 바뀌었을 때 업데이트함
  • Unmount : 컴포넌트가 화면에서 사라질(제거될) 때

📌 useEffect

  • React component가 렌더링 될 때마다 특정 작업(side effect)을 실행할 수 있도록 하는 리액트 Hook이다.
    여기서 side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과를 뜻한다.
    이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다.

📚 useEffect 사용방법

//useEffect 불러오기
import React, {useEffect} from 'react';
...

useEffect(function, deps)
  • function : 수행하고자 하는 작업
    리액트는 이 함수를 기억했다가 DOM 업데이트 후 불러낸다. 또한 이 함수에서 함수를 return 할 경우 그 함수의 컴포넌트가 Unmount될 때 다시 한 번 실행된다.
  • deps : 배열형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열
    deps에 특정 값을 넣게 되면 컴포넌트가 mount 되거나 지정한 값이 업데이트 될 때 useEffect를 실행한다.

📚 useEffect 사용방식

  1. componentDidMount
    Component가 mount 됐을 때 (처음 나타났을 때 실행)
useEffect(() => {
  console.log("마운트가 될 때만 실행");
}, []);

useEffect(() => {
  console.log("리렌더링 될 때마다 실행");
});
  1. componentDisUpdate
    Component가 update 될 때 (특정 props, state가 바뀔 때 실행)
useEffect(() => {
  console.log(name);
  console.log("name이 업데이트될 때 마다 실행");
}, [name]);
  1. componentDidUnMount
    Component가 unmount 될 때(사라질때) & 업데이트 되기 직전에 실행
useEffect(() => {
  console.log("effect");
  console.log(name);
  return () => {
    console.log('cleanup');
    console.log(name);
  };
}, []);

출처
State
https://lakelouise.tistory.com/260
https://onlyfor-me-blog.tistory.com/463
https://life-with-coding.tistory.com/510
Hook
https://well-made-codestory.tistory.com/44
라이프사이클
https://whwl.tistory.com/282
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

profile
구준희
꾸준히합니다.
이전 포스트

[포스코x코딩온] 웹개발자 풀스택 과정 12주차 | Component, Props, Event Handling

다음 포스트

[포스코x코딩온] 웹개발자 풀스택 과정 14주차 | React hook form, ContextAPI

post-custom-banner

0개의 댓글