2024. 06. 14 (금) 7주차 - Daily Coding - Day05

 

48강

Ref - 참조를 의미

- 직접 DOM을 참조할 수 있게 해준다

- 상태를 사용하지 않고 DOM의 값들을 조작할 수 있다

- Referencing Values with Refs (공식 문서)

 

4주차 3강(4-3)https://github.com/dev-owen/react-fundamental/tree/practice/4-3

GitHub - dev-owen/react-fundamental: 슈퍼러닝 react 실습 repository

 

 

어떤 값을 기억하고 싶지만 그 값으로 인해 컴포넌트의 렌더링을 일어나고 싶지 않다.
useRef 를 import 하여 사용.
초기값을 선언해줘야 함.
useRef를 통해 current 의 값을 기억할 수 있다 정도로 인지하기

​

useRef를 통해 값을 조작하는 것도 가능
리액트는 자동적으로 DOM을 업데이트 해준다. 나의 컴포넌트는 그것을 직접 조작할 일이 별로 없지만
때때로 직접 DOM에 접근해야할 때가 있다.
예를 들어 포커스를 감지, 스크롤, 사이즈 특정할 때 DOM 엘레먼트 값을 직접 조작할 필요가 있음.

 

 

​49강 

사이드 이펙트 처리 - 1 - useEffect
사이드 이펙트란?
useEffect()


리액트의 역할

기본적인 리액트의 사이클을 벗어나는 동작이 발생한다면?
검색 창 자동완성 기능

 

​

이 두개의 리렌더링 중에 뭐가 먼저 발생해야할까?
이 모든 순서를 하나하나 다 알 수가 없다.
이런 상황을 다루기 위해 리액트가 제공하는 기능 중 하나가 바로 useEffect() 라는 훅.

​

useEffect
컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook
컴포넌트의 가장 상단에 써야한다.
화면에 뭔가 보여질 때 까지 코드 조각을 지연시킨다.

​

사용 방법

useEffect(() => {...}, [ dependencies ]);

https://react.dev/learn/synchronizing-with-effects

Synchronizing with Effects – React

 

 

// App.js

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

import Login from './components/Login/Login';
import Home from './components/Home/Home';
import MainHeader from './components/MainHeader/MainHeader';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem('isLoggedIn');

    if (storedUserLoggedInInformation === '1') {
      setIsLoggedIn(true);
    }
  }, []);

  const loginHandler = (email, password) => {
    // We should of course check email and password
    // But it's just a dummy/ demo anyways
    localStorage.setItem('isLoggedIn', '1');
    setIsLoggedIn(true);
  };

  const logoutHandler = () => {
    localStorage.removeItem('isLoggedIn');
    setIsLoggedIn(false);
  };

  return (
    <React.Fragment>
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </React.Fragment>
  );
}

export default App;