TIL 0816

회고록

react 입문 주차가 끝나고 숙련주차를 시작함에 있어 style component와 react hook에 대해서 배웠다 입문 주차에서보다 더 깊게 배울 수 있었다

useEffect와 useRef를 배우면서 useEffect는 외부 API를 사용할때 사용한다고 챌린지 수업때 간단하게 배웠으며 최초 실행가 의존성 배열로 계속 실행할지 말지도 설정 할 수 있다 useRef는 useState랑 다른점이 있는데 useState에 비해 useRef는 매번 리랜더링이 실행 되지 않는다 그래서 때에 따라 맞는 방법을 사용한다

useEffect

컴포넌트가 화면에 그려졌을때 내가 보여주고 싶은 부분이 있을경우 useEffect를 사용한다

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  }[]); // 의존성 배열

  return <div>Home</div>;
}

export default App;
의존성 배열의 여부에 따라 리랜더링이 될 경우 useEffect도 계속 실행되므로 확인필요

useRef

import "./App.css";
import { useRef } from "react";

function App() {
  const ref = useRef("초기값");
  console.log("ref 1", ref);

  ref.current = "바꾼 값";
  console.log("ref 1", ref);

  return (
    <div>
      <p>useRef에 대한 이야기에요.</p>
    </div>
  );
}

export default App;
위 코드로 실행하며 객체 값으로 나오기 떄문에 ref.current로 접근가능하다