React Native : 3월 10일

제목엔 리액트 네이티브라 적었지만 사실상 리액트 복습

 

React & React Native 라이프 사이클 

- class를 쓸 땐 하나하나 라이프 사이클을 선언해었는데 hook은 그런 거 없어도 됨

- 그래서 내부에서 어떻게 작동되는지 알기 어려워짐

- hook보단 class로 짠 코드가 라이프 사이클을 이해하는 데에 더 도움이 될 수 있다 (그렇다고 그걸로 코드를 짜라는 건 아님)

 

React 클래스 컴포넌트에서 제공하는 내장 메서드

shouldComponentUpdate, componentDidUpdate, constructor, render 등

 

마운트와 상태 업데이트의 차이 

마운트

- Mount는 컴포넌트가 처음 생성되어 화면에 나타나는 과정 (처음 한 번만 실행됨)

- 리액트에서는 컴포넌트가 처음 렌더링될 때 "마운트된다"고 표현

- constructor -> render -> componentDidMount순으로 실행

- API호출, 초기 데이터 설정 등의 일을 함

상태 업데이트

- 컴포넌트가 마운트된 후, setState로 상태가 변경될 때 발생하는 과정

- 상태가 바뀌면 React는 해당 컴포넌트를 다시 렌더링

- shouldComponentUpdate -> render -> componentDidUpdate

- DOM 업데이트, 상태변화 감지 등에 이용

 

마운트될 때 실행되는 코드를 useEffect로 적어야하는 이유

1. 리액트에서는 렌더링 → 화면 업데이트 →useEffect 실행 순서로 작동함

- 렌더링 과정에서 직접적인 부작용을 방지할 수 있음

- useEffect로 적지 않고 return문에 적으면, 렌더링할 때마다 실행돼서 성능 문제나 버그가 생길 수 있음

2. 리액트의 render 함수는 순수 함수(pure function)처럼 동작해야함

- 즉 화면을 그리는 역할만 하고 부수효과는 없어야 된다는 것

- 부수효과의 예: API 요청, 콘솔 출력, DOM 조작, setTimeout, setInterval같은 비동기 처리 등

3. const는 마운트될 때만 실행되는 코드를 처리할 수 없음

- const는 렌더링 될 때마다 실행되기 때

- 리액트에서는 상태가 변할 때마다 컴포넌트 함수 자체가 다시 실행

 

---

 

리액트 컴포넌트 : const와 화살표 함수 vs function 

function 

- 함수 선언문

- 호이스팅 : 선언 전에 사용 가능

const와 화살표 함수

- 함수 표현식

- 호이스팅 되지 않음

- this 바인딩이 없음

 

const

- 리액트에서 const를 많이 쓰는 이유는 컴포넌트나 함수를 변경할 일이 없기 때문(변경해야하는 경우엔 let을 쓰면 됨)

- 객체나 배열을 사용할 때 변경은 가능하지만, 재할당은 불가능하다.

 

 

---

 

 

useCallback의 역할

함수를 메모이제이션하여 매번 새롭게 생성되지 않도록 함. 부모가 리렌더링될 때마다 새롭게 생성되는 함수를 방지!

 

React.memo를 사용하면 부모 컴포넌트가 리렌더링될 때마다 자식 컴포넌트도 무조건 리렌더링 되는 걸 방지할 수 있음.

그런데 React.memo만 있으면 불완전함.

Parent가 리렌더링될 때마다 handleClick함수가 새롭게 생성되는데, 이 새로운 함수를 다른 객체로 인식하여 Child가 계속 리렌더링된다.

import { useState } from "react";

const Child = React.memo(({ onClick }) => {
  console.log("🔄 Child 렌더링됨!");
  return <button onClick={onClick}>클릭</button>;
});

const Parent = () => {
  const [count, setCount] = useState(0);

  // 매번 새로운 함수가 생성됨 ❌
  const handleClick = () => {
    console.log("버튼 클릭됨!");
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
      <Child onClick={handleClick} />
    </div>
  );
};

export default Parent;

 

실행	콘솔창 출력
[카운트 증가] 버튼 클릭	"Child 렌더링됨!"
[클릭] 버튼 클릭	"버튼 클릭됨!"

 

→ 따라서 useCallback이 필요!

const { useState, useCallback } = React;

const Parent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("버튼 클릭됨!");
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
      <Child onClick={handleClick} />
    </div>
  );
};

const Child = React.memo(({ onClick }) => {
  console.log("Child 렌더링됨!");
  return <button onClick={onClick}>클릭</button>;
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Parent />);

실행	콘솔창 출력
[카운트 증가] 버튼 클릭	출력없음
[클릭] 버튼 클릭	"버튼 클릭됨!"

 

 

useCallback – React

아오 어려워 ㅠㅠ