[패스트 캠퍼스 FE] 리액트 맛보기 - 3

조규준·2022년 5월 13일
0

[패스트 캠퍼스 FE]

목록 보기
16/20
post-thumbnail

리액트 맛보기 - 3


목차

1️⃣ 컴포넌트 상태 다루기

2️⃣ 컴포넌트 사이드이펙트 다루기

3️⃣ 커스텀 훅 만들기

4️⃣ Hook Flow 이해하기






컴포넌트 상태 다루기



컴포넌트란?

공식문서


useState() 란?

useStatestate의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다.


예제: useState() 를 이용한 기존의 코드 리팩토링

import ReactDOM from 'react-dom';
import React from 'react';
import logo from './logo.svg';
import './App.css';

const rootElement = document.getElementById('root')

function App() {

  const [keyword, setKeyword] = React.useState("");
  const [result, setResult] = React.useState("");
  const [typing, setTyping] = React.useState(false);

  // 💡💡💡
  // useState 함수 : [value, setValue] 로 사용됨.
  // setValue(새로운 값)를 통해서, 기존의 value에 새로운 값을 넣음.
  // 이렇게 만들면, {value}로 함수 안에서 접근가능
  // 💡💡💡

  function handleChange (event) {
    setKeyword(event.target.value);
    setTyping(true);
  }

  function handleClick() {
    setResult(`We find results of ${keyword}`);
    setTyping(false);
  }

  return (
    <>
      <input onChange={handleChange} />
      <button onClick={handleClick}>search</button>
      <br/>
    <span>{typing ? `Looking for  ${keyword}` : result }</span>
    </>
  );
}

ReactDOM.render(<App/>, rootElement);

export default App;

최종 정리






컴포넌트 사이드 이펙트 다루기



사이드 이펙트란?


useEffect() 란?

변수의 값, 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트 해주는 함수
(맨 처음 렌더링 될때 한번 실행되며, 배열로 지정한 useState 값이 변경 될때마다 실행됨)


예제 : useEffect 다뤄보기

import ReactDOM from 'react-dom';
import React from 'react';
import logo from './logo.svg';
import './App.css';

const rootElement = document.getElementById('root')

function App() {

  const [keyword, setKeyword] = React.useState(()=>
  {
    console.log('initialize')
    return window.localStorage.getItem("keyword");
  });

  // 💡💡💡
  // keyword의 기본값을, localStorage에 저장된 keyword 값을 불러와서 설정함.
  // 함수에 담는 이유는, render 후에 initialize까지 다소 delay가 있더라도 확실히 불러온 다음에 쓰기 위함.
  // 💡💡💡

  const [result, setResult] = React.useState("");
  const [typing, setTyping] = React.useState(false);

  console.log("render")

  React.useEffect(()=>{
    console.log('effect');
    window.localStorage.setItem("keyword",keyword);
  },[keyword,typing]);

  // 💡💡💡
  // keyword 값이 바뀔 때마다 localStorage에 keyword를 저장함.
  // 두번째 인자로 주는 배열 : dependency array ➡️ 비교할 값을 지정함.
  // 💡💡💡

  function handleChange (event) {
    setKeyword(event.target.value);
    setTyping(true);
  }

  function handleClick() {
    setResult(`We find results of ${keyword}`);
    setTyping(false);
  }

  return (
    <>
      <input onChange={handleChange} value={keyword}/>
      <button onClick={handleClick}>search</button>
      <br/>
      <span>{typing ? `Looking for  ${keyword}` : result }</span>
    </>
  );
}

ReactDOM.render(<App/>, rootElement);

export default App;

localstorage 보는법
검사 -> Application -> Local Storage


최종 정리






커스텀 훅 만들기



함수화

위의 예제에서 사용한 코드를 보면, 입력값마다 useState를 사용하는 코드를 선언했다.
이를 효율적으로 사용하기 위해, useState와 useEffect를 동시에 사용하는 커스텀 훅을 만들어 보겠다!

예제: useState와 useEffect를 동시에 사용하는 커스텀 훅 만들기

function useLocalStorage를 만들어보자!

import React from 'react';
import './App.css';

function useLocalStorage(itemName, value="") {

  const [state, setState] = React.useState((itemName) => {
    return window.localStorage.getItem(itemName) || value;
  })
  // itemName을 state에 저장하고, localStorage에서 itemName을 getItem으로 불러옴
  // 만일 localStorage의 값이 없으면, 빈 문자열을 불러옴

  React.useEffect(() => {
    console.log('effect');
    window.localStorage.setItem(itemName, state);
  }, [state]);

  return [state,setState];
}

function App() {

  const [keyword, setKeyword] = useLocalStorage("keyword");
  const [result, setResult] = useLocalStorage("result");
  const [typing, setTyping] = useLocalStorage("typing",false);

  function handleChange (event) {
    setKeyword(event.target.value);
    setTyping(true);
  }

  function handleClick() {
    setResult(`We find results of ${keyword}`);
    setTyping(false);
  }

  return (
    <>
      <input onChange={handleChange} value={keyword}/>
      <button onClick={handleClick}>search</button>
      <br/>
      <span>{typing ? `Looking for  ${keyword}` : result }</span>
    </>
  );
}

export default App;

최종 정리






Hook Flow 이해하기



Hook들의 호출 타이밍

  1. render
  2. useState
  3. render 끝
  4. useEffect
    • dependency array가 없을때 -> 모든 변경 사항이 render 될때마다 호출
    • dependency array가 empty일때 -> 처음에 render 될 때만 호출
    • dependency array가 있으면 -> array의 변경 사항에 따라 호출

📌 prev

useState에서 setState시, 이전의 값을 불러오는 prev 값이 주입된다.


최종정리

useEffect는 부모보다 children이 먼저 실행된다.
clean up후에 useEffect가 실행되는데,
clean up은 부모가 먼저 일어난다.






🍯 Honey Tips

코드 위치 옮기기 ➡️ alt(option) + 방향키
코드 복사해서 옮기기 ➡️ alt(option) + shift + 방향키


🧐 더 공부할 내용

Hook 이란?
(use 로 시작하면 Hook이다.)

profile
사주보는 프론트엔드 개발자

0개의 댓글