46강_230704_React(vscode_snippet, React 라이브러리, Hooks)

 

목차

046

1. vscode확장 프로그램_ES7+ React/Redux/React-Native snippets 2. React 라이브러리 3. Hooks

 

 

 

---

vscode확장 프로그램_ES7+ React/Redux/React-Native snippets

단축어로 코드를 자동완성 해주는 확장프로그램이다. 아래 단축키정도는 알고 작성을 하면 컴포넌트 형식을 자동완성 ㄱ시켜 편리하게 작업할 수 있다.

// rcc -> React 클래스 component 생성
import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
      <div>index</div>
    )
  }
}


// rafc -> 화살표 함수 컴포넌트 작성과 동시에 export
import React from 'react'

export const index = () => {
  return (
    <div>index</div>
  )
}


// rafce -> export가 분리된 화살표 함수 컴포넌트가 생성
import React from 'react'

const index = () => {
  return (
    <div>index</div>
  )
}

export default index

 

 

 

---

React 라이브러리

React 라이브러리 설치

• npx create-react-app [폴더명]
  • 예) npx create-react-app test

라이브러리 사용하기 전 정리

• npx create-react-app exam으로 다운로드한 리엑트 라이브러리이다. 해당 구성 중, 우리가 작업에 필요한 파일만 남겨놓으면 된다.
• public 폴더
  • 정적파일을 보관하는 폴더이다.
  • 해당 폴더에서는 한 개의 index.html 외에 필요한 파일은 없으니 정리해서 작업하도록 하자.
    
    • html이 한 개만 존재하는 이유는 SPA로 작업을 진행하기 때문이다.
• src 폴더
  • 페이지와 컴포넌트 폴더를 만들어서 프로젝트를 구성하는 폴더이다.

 

 

React 라이브러리_사용예시

 React 라이브러리를 설치받아 필요한 파일만 살려서 작업을 진행하였다. 사용한 파일은 "App.js, App.css, index.js" 와 "component / Mycom.jsx, Mycom3.jsx", "pages/Main.jsx", "public/index.html"이다. 

 라이프사이클을 간단하게 보여주는 페이지는 Mycom의 컴포넌트와 연결해서 사용하고, useState와 useEffect를 사용하는 페이지는 Mycom3의 컴포넌트와 연결해서 보도록 한다.

#. 폴더의 경로는 다음과 같다.

 

💙 라이프사이클 예시_componentDidMount / componentDidUpdate

1. Mycom.jsx_라이프사이클을 확인할 수 있는 함수를 생성한다.

• componentDidMount: 컴포넌트가 초기에 생성되면 동작하는 함수이다.
• componentDidUpdate: 컴포넌트의 상태가 변화되면 동작하는 함수이다.
• "상태변환" 버튼을 클릭하면 state의 num 값이 +1 되므로, 콘솔에서 componentDidUpdate 함수가 동작하는 것을 확인할 수 있다.

import { Component } from "react";

class Mycom extends Component {.

  constructor(props) {
    // super : 부모의 생성자 함수를 호출 해줘야 this를 사용할 수 있다.
    super(props);
    this.state = {
      num: 0,
    };
  }
  // 컴포넌트가 초기에 생성되면
  // constructor ->  render -> componentDidMount
  componentDidMount() {
    console.log("나 생성");
  }

  // componentDidUpdate: 컴포넌트의 상태가 변화되면 상태변환 후, componentDidUpdate
  componentDidUpdate() {
    console.log(this.props.name + "인데 나 상태 변함 리렌더링");
  }

  render() {
    return (
      <div className={"com " + this.props.Cname}>
        {this.props.name}
        <button
          onClick={() => {
            this.setState({ ...this.state, num: (this.state.num += 1) });
          }}
        >
          상태 변함
        </button>
      </div>
    );
  }
}

class Mycom2 extends Component {
  render() {
    return <div>안녕 컴포넌트 2</div>;
  }
}

// 다수의 컴포넌트를 내보낼 경우
export { Mycom, Mycom2 };

 

2. Main.jsx_Mycom.jsx의 컴포넌트를 받아 화면에 render 한다.

import { Component } from "react";
import { Mycom, Mycom2 } from "../components/Mycom";

export default class Main extends Component {
  render() {
    return (
      <>
        메인 페이지 <br />
        <Mycom name="이름이" Cname="red" />
        <Mycom2 />
      </>
    );
  }
}

 

 

 

💙 useState / useEffect _ 예시

useState

• 함수형 컴포넌트에서 상태값을 관리할 수 있게 해 준다.
  • 상태 값을 만들어주고, 수정할 때 사용하는 메소드를 만들어준다.
• 기본구조
  • 배열의 비구조화 문법을 이용해 받기 때문에 state와 setState의 이름은 임의로 정할 수 있다.
  • 첫 번째 반환값: 상태변수 / 두 번째 반환값 : 상태변수를 업데이트할 setState 함수
  • 매개변수로 전달한 값이 초기값이다.

const [state, setState] = useState(initialState)

useEffect

• 라이프사이클을 지원해 주는 함수이다.
• 기본구조
  • 첫 번째 매개변수: 수행하고자 하는 작업
  • 두 번째 매개변수: 배열, 배열 안에서 검색하고자 하는 특정 or 빈 배열
    • 보통 컴포넌트 state 값이 들어가는데 배열에 포함된 값이 변경되었을 때 해당 useEffect가 실행된다.
    • 빈 배열을 넣는 경우, 컴포넌트가 처음 렌더링될 때, mount 될 때만 실행된다.
    • 배열을 생략 시, 리렌더링 될 때마다 실행된다.
• useEffect는 필요한 만큼 만들어도 된다.

import React, { useEffect } from 'react';   

useEffect(() => {
        console.log('마운트 될 때만 실행된다.');   
}, []);


useEffect(() => {
    console.log('렌더링 될 때 마다 실행된다.');
});

 

1. Mycom3.jsx_라이프사이클을 확인할 수 있는 함수를 생성한다.

• "클릭" 버튼 클릭 시, num의 값이 1씩 증가한다.
• "활성화/비활성화" 버튼 클릭 시, active의 값이 true, false로 토글 된다.

import React, { useEffect, useState } from "react";

const Mycom3 = ({ newNum, newNum2, newNum3 }) => {


  // count 변수 선언
  // 다시 리렌더링되면 코드를 다시 실행시키는 과정(리렌더링)에서 변수가 다시 선언되어 다시 0의 값을 갖는다.
  // 따라서 값을 계속 사용해야 한다면 상태값으로 보관을 해야한다.
  let count = 0; // 따라서 count의 값은 계속 0일 것이다

  const [num, setNum] = useState(0);
  const [active, setActive] = useState(false);


  // useEffect 라이프사이클 함수
  
  // 처음 렌더링 될 때 실행되는 함수
  useEffect(() => {
    console.log("componentDidMount");
  }, []);

  // 처음 렌더링 되거나, num 값이 수정되면 실행되는 함수
  useEffect(() => {
    // num이 변경된 경우에는 이 업데이트 함수만 실행된다.
    // 제어문을 사용해서 만들어주면 componentDidUpdate만을 사용할 수도 있다.
    console.log("componentDidMount, componentDidUpdate");
    console.log("나눈 num");
    // componentDidUpdate: 상태가 변환 이후의 값을 사용하는 라이프사이클 함수
    console.log("상태값", num);
  }, [num]);


  // 처음 렌더링 되거나, active 값이 수정되면 실행되는 함수
  useEffect(() => {
    // active이 변경된 경우에는 이 업데이트 함수만 실행된다.
    console.log("나는 active");
  }, [active]);

  // 처음 렌더링 되거나, num이나 active 값이 수정되면 실행되는 함수
  useEffect(() => {
    // num이나 active 둘 중 하나라도 변경이 되면 업데이트
    console.log("num이나 active가 변경됐어");
  }, [num, active]);

  // 클릭 시, num의 값이 1씩 증가한다.
  function clickHandler() {
    console.log("클릭함");
    // 상태를 변경. 상태가 변경되므로 componentDidUpdate가 실행된다.
    // 상태 값을 사용하는 이유
    // 이전의 상태 값이 보관이 된다. == 상태값이 계속 유지가 된다.
    setNum(num + 1);
    count++;
    console.log("변수", count);

    // ❗ 실수가 많으니까 주의하자!
    // 상태 값을 수정하고 바로 값을 사용하면 안된다. componentDidUpdate가 실행된 후에 사용해야한다.
    // console.log("상태값", num);
  }

  // 클릭 시 active 값이 true, false로 토글된다.
  function activeHandler() {
    setActive(!active);
  }
  return (
    <div>
      <button onClick={clickHandler}>클릭</button>
      <button onClick={activeHandler}>활성화/비활성화</button>
    </div>
  );
};

export default Mycom3;

 

2. Main.jsx_Mycom3.jsx의 컴포넌트를 받아 화면에 render 한다.

import { Component } from "react";
import Mycom3 from "../components/Mycom3";

export default class Main extends Component {
  render() {
    return (
      <>
        메인 페이지 <br />
        <Mycom3 newNum={1} newNum2={2} newNum3={3} />
      </>
    );
  }
}

 

처음 페이지 렌더 시, 나오는 콘솔메시지

 

"클릭"버튼 클릭 시, 나오는 콘솔메시지

 

"활성화/비활성화"버튼 클릭 시, 나오는 콘솔메시지

 

 

 

 

---

Hooks

• React에서 기존에 사용하던 클래스 컴포넌트를 사용할 필요 없이, 함수형 컴포넌트에서도 state와 여러 react 기능을 사용할 수 있도록 만든 라이브러리이다.

 

Hooks 사용규칙

💡 같은 Hook을 여러 번 호출할 수 있다.

export default function App(){
  const [value1, setValue1] = useState()
  const [value2, setValue2] = useState()
  return {
    <div>
      <div>{value1}</div>
      <div>{value2}</div>
    </div>
  }
}

 

💡 비동기 함수(async)는 콜백함수로 사용할 수 없다.

export default function App(){
  // useEffect Hook 내부에, 비동기 함수가 들어가므로 에러 발생
  useEffect(async () => {
    await Promise.resolve(1)
  }, [])
  
  return {
    <div>
      <div>Test</div>
    </div>
  }
}

 

 

Hooks 종류

• useState : 컴포넌트의 state를 관리할 수 있다.
• useEffect : 렌더링 이후에 실행할 코드를 만들 수 있다. 어떤 변수가 변경될 때마다, 특정기능이 작동하도록 할 수 있다.
• useContext : 부모컴포넌트와 자식 컴포넌트 간의 변수와 함수를 전역적으로 정의할 수 있다.
• useReducer : state 업데이트 로직을 reducer 함수에 따로 분리할 수 있다.
• useRef : 컴포넌트나 HTML 요소를 레퍼런스로 관리할 수 있다.
• forwardRef : useRef로 만든 래퍼런스를 상위 컴포넌트로 전달할 수 있다.
• useImperativeHandle : useRef로 만든 래퍼런스의 상태에 따라, 실행할 함수를 정의할 수 있다.
• useMemo, useCallback : 의존성 배열에 적힌 값이 변할 때만 값, 함수를 다시 정의할 수 있다. (리렌더링 시 정의 안 함)
• useLayoutEffect : 모든 DOM 변경 후, 브라우저가 화면을 render 하기 전에 실행되는 기능을 정할 수 있다.
• useDebugValue : 사용자정의 Hook의 디버깅을 도와준다.

 

 

• Hooks
  • [React] React Hooks란? / 사용법 ( useState, useEffect 등등.. ) (tistory.com)