[React] useLayoutEffect, 이벤트 핸들링 etc.

1. useLayoutEffect
2. 컴포넌트 이벤트 핸들링

---

1. useLayoutEffect 이란 ⭐️

• 리액트 훅 함수를 바탕으로 한 생명주기는 다음과 같음

• 브라우저가 렌더링될 때 .js파일은 브라우저에서 자바스크립트 엔진으로 권한을 넘겨 .js 해당 파일을 파싱하고 그리게 됨
• 위 그림의 훅 라이프 사이클을 보다시피 브라우저가 스크린에 페인팅 작업이 완료된 이후 useEffect를 실행하는 구조를 가졌음
• 따라서 아래 코드와 같이 렌더링할 때 useState(0)과 같은 초기 useState의 값이 빈 값이라면, 0을 출력했다가 useEffect를 통해 채워지는 구조를 띔

// 코드 참고: https://merrily-code.tistory.com/46

import { useEffect, useState } from 'react';

function App() {
  const [age, setAge] = useState(0);
  const [name, setName] = useState('');

  useEffect(() => {
    setAge(25);
    setName('찬민');
  }, []);

  return (
    <>
      <div className='App'>{`그의 이름은 ${name} 이며, 나이는 ${age}살 입니다.`}</div>
    </>
  );
}

export default App;

• useLayoutEffect는 바로 이런 문제(↑)를 해결하기 위해 등장한 훅임
  
  
• useLayoutEffect는 브라우저가 화면에 DOM을 그리기 전에 이펙트를 수행함
  따라서 위의 코드 실행 순서도 달라지게 되는 것임
  1. 레이아웃 이펙트 내부의 setNumber, setName 호출
  2. <div>그의 이름은 찬민이며, 나이는 25살 입니다.</div>를 페인트

// 코드 참고: https://merrily-code.tistory.com/46

import { useLayoutEffect, useState } from 'react';

function App() {
  const [age, setAge] = useState(0);
  const [name, setName] = useState('');

  useLayoutEffect(() => {
    setAge(25);
    setName('찬민');
  }, []);

  return (
    <>
      <div className='App'>{`그의 이름은 ${name} 이며, 나이는 ${age}살 입니다.`}</div>
    </>
  );
}

export default App;

 

2. 컴포넌트에서 이벤트 핸들링 ⭐️

• 이벤트로 설정할 함수를 호출하는 것이 아닌 직접 넣어 줄 때는 화살표 함수 문법을 사용하여 넣어 주어야 함

case 1: 작동하지 않는 문법
<button onClick={this.setState({ number: number + 1})}>  (x)

case 2: 작동하는 문법
<button onClick={()=> this.setState({ number: number + 1}; )}>  (o)

or
case 3: 아예 함수로 빼주고 해당 함수를 불러 사용한다.

const plusNum = (number) => {
  setState(number : number + 1);
}
...

<button onClick={plusNum}>+ 1 </button>

 

Tips. 리액트의 성능 개선 방법

• hook 함수 사용(useMemo, useCallback)
• 코드 스플리팅(react.lazy(), Next.js 프레임워크 사용 등)