리액트 Hooks이란?

시리즈

2024. 11. 13. PM 2:44:25

#React #리액트 #훅 #Hooks #생애주기 #상태관리

Hooks의 등장 배경

(1) 클래스 컴포넌트의 한계

React의 초기 버전에서는 클래스(class)로 컴포넌트를 작성해 상태 관리와 생명주기를 다뤘습니다. 다음은 클래스 컴포넌트 예시예요.

class PuddingCamp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { user: null };
    // 이벤트 핸들러에 this 바인딩
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    // 컴포넌트 마운트 시 호출
    fetchUser(this.props.id);
  }

  componentDidUpdate(prevProps) {
    // Props 변경되면 호출
    console.log('component update')
  }

  componentWillUnmount() {
    // 컴포넌트 클린업
    console.log('clean up')
  }

  handleClick() {
    // 클릭 이벤트에 대한 처리
  }

  render() {
    // UI 렌더링
  }
}

복잡해 보이지요? 함수 컴포넌트를 작성해볼게요.

function PuddingCamp({ id }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    console.log('component update');
	    
	return () => {
      console.log('clean up')
    }
  }, [id]);

  const handleClick = () => {}

  return ( ... );
}

깔끔하죠? 게다가 코드 흐름이 더 직관적입니다.

(2) 함수 컴포넌트의 한계

하지만, 은총알은 없습니다. 위와 같은 예시는 간단하기 때문에 문제를 깔끔하게 해결해주지만, 조금만 컴포넌트 관계가 복잡해져도 금방 한계에 부딪힙니다. 컴포넌트 관계가 복잡해지다보면 상태 로직을 재사용하게 되는데, 이 과정에서 HOC(Higher Order Components) 문제나 래퍼 지옥(wrapper hell) 문제가 자주 발생하죠.

const UserData = ({ children }) => {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);
  
  return children(user);
};

const Camps = ({ children }) => {
  const [camps, setCamps] = useState([]);
  
  useEffect(() => {
    fetchCamps().then(setCamps);
  }, []);
  
  return children(camps);
};

const CampTeams = ({ children }) => {
  const [team, setTeam] = useState([]);
  
  useEffect(() => {
    fetchTeam().then(setTeam);
  }, []);
  
  return children(team);
};

// 여러 데이터가 필요한 컴포넌트
const UserDashboard = () => (
  <UserData>
    {user => (
      <Camps>
        {camps => (
          <CampTeams>
            {team => (
              <div className="dashboard">
                <h1>환영합니다, {user.name}님</h1>
                <div className="products">
                  <h2>추천 캠프</h2>
                  {camps.map(camp => (
                    <CampTeam
                      key={camp.id} 
                      camp={camp}
                      inTeam={team.some(item => item.id === camp.id)}
                    />
                  ))}
                </div>
                <div className="cart">
                  <h2>장바구니</h2>
                  {team.map(item => (
                    <CampTeam 
                      key={item.id}
                      item={item}
                      campDetails={camps.find(c => c.id === item.id)}
                    />
                  ))}
                </div>
              </div>
            )}
          </CampTeams>
        )}
      </Camps>
    )}
  </UserData>
);

과장한 게 아니예요. 마치 콜백 지옥처럼(callback hell) 컴포넌트가 깊게 중첩되는 건 흔히 발생합니다. 게다가 함수 컴포넌트는 JavaScript 측면에선 함수잖아요. 함수 안에서 변수에 접근하는 스코프(scope)가 각 중첩 단계마다 생성되므로 코드 가독성이 좋지 않지요. 또 컴포넌트가 강하게 결합되어 분리하기 어렵고, 코드 수정을 어렵게 합니다.

이러한 문제를 Hooks가 해결해줍니다.

2. 리액트 Hooks

리액트 Hooks는 함수 컴포넌트에서 상태(state) 관리와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 기능입니다. 훅(갈고리)이라는 이름의 유래는 공식적인 설명은 없는 것 같은데, 컴포넌트 생명주기에 어떤 동작을 건다는 설명이 가장 지지 받지요.ㅇ

(1) 컴포넌트 생애주기(lifecycle)

리액트 컴포넌트의 생애주기는 크게 3단계로 구분합니다.

1) 컴포넌트 마운트 될 때

컴포넌트가 리액트 돔(Dom)에 렌더링 되는 시점입니다.

function PuddingCamp() {
  const [name, setName] = useState('푸딩 캠프');

  useEffect(() => {
    // 클래스 컴포넌트의 componentDidMount와 동일
    // 의존성 배열이 비어있으면 마운트 시에만 실행
  }, []);
}

2) 상태가 변경될 때

컴포넌트가 받는 Props가 변경되거나 컴포넌트의 상태(State)가 변경되는 시점입니다.

function PuddingCamp({ id }) {
  const [name, setName] = useState('푸딩 캠프');
  useEffect(() => {
    setName('푸딩캠프');
    
    // props(id)가 변경될 때마다 실행
  }, [id]);
  
  useEffect(() => {
    // name가 변경될 때마다 실행
    console.log('이름 변경');
  }, [name]);
}

다이시 카토는 리액트 훅이 등장하면서 상태를 생성하는 새로운 방법이 생겼다고 하면서, 폼, 서버 캐쉬, 내비게이션 상태와 같은 상황에서 발생하는 상태 관리 문제를 해결하는 것이 리액트 훅의 목표 중 하나라고 하기도 했습니다. (책, 리액트 훅을 활용한 마이크로 상태 관리 (위키북스))

3) 마운트 된 컴포넌트가 마운트 해제 될 때

리액트 돔에 마운트 된 컴포넌트가 마운트 해제되어 DOM에서 제거되는 시점입니다.

function PuddingCamp({ id }) {
  useEffect(() => {
    const tid = setInterval(() => {
      console.log(`푸딩캠프의 토이스토리가 요즘(${new Date()}) 핫합니다.`);
      console.log('https://puddingcamp.com/toystory');
    });
    
    // 정리 작업 (componentWillUnmount와 동일)
    return () => {
      clearInterval(tid);
    }
  }, []);
}

(2) Hooks 사용 방법

리액트 훅은 JavaScript 측면에서 단순 함수입니다. use라는 접두사를 붙인 이름을 사용하지요.

function usePuddingCamp() {
}

리액트 훅은 함수 컴포넌트 안이나 사용자 제작 훅(Custom Hook) 안에서만 사용할 수 있습니다. 훅을 호출(call, invoke)하는 건 최상위 스코프 단계에서만 호출할 수 있어요. 가령, 조건문 안에서는 사용하지 못해요. 가장 중요한 이유는 훅의 순서를 보장하지 못하기 때문이에요. 조건에 따라 호출되는 훅이 달라지거든요.

function PuddingCamp() {
  // 각 Hook은 내부에서 순서대로 연결되어 호출됩니다.
  // Hook 1
  const [generation, setGeneration] = useState(0);

  // Hook 2
  const [name, setName] = useState("");

  // Hook 3
  useEffect(() => {
    document.title = `${name}: ${generation}기`;
  }, [generation, name]);

  // 허용되지 않음.
  if (count % 2) {
    const [evenGeneration, setEvenGeneration] = useState(0);
  }
}

반복문에서 사용하지 못합니다. 반복문을 사용하기에 따라서는 순서가 보장되지만, 예측 가능성이 떨어지고 최적화하기 어렵습니다. 이와 관련해서는 조건부 렌더링에서 Transpiling과 Compiling을 설명하며 다뤘습니다. 그리고, 또 다른 이유는 리액트가 설정보다는 규약(관례)(Convention over Configuration) 철학을 따르는 점이 아닐까 생각합니다. 유연성을 조금 포기하는 대신 안전하고 유지보수하기 좋은 코드를 유도하는 거죠.

푸딩캠프 뉴스레터를 구독하면 학습과 성장, 기술에 관해 요약된 컨텐츠를 매주 편하게 받아보실 수 있습니다.

이전 컨텐츠

다음 컨텐츠