인프런 커뮤니티 질문&답변

안녕하세요, 소플입니다.

render() 함수 코드가 커질 경우 각 부분 별로 렌더링 함수를 적당히 분리하는 작업을 진행하게 됩니다.

현재 실습하고 계신 부분은 리액트를 사용하지 않고 진행하고 있는데,

리액트에서는 이렇게 분리된 각각의 render() 함수가 리액트 컴포넌트가 된다고 생각하시면 됩니다.

강의 후반부에서는 리액트를 사용해서 실습을 진행하기 때문에 아마 해당 실습을 진행하다보면 자연스럽게 이해가 되실 거라고 생각합니다.

참고로 이렇게 컴포넌트 단위로 분리하게 되면 렌더링 측면에서도 효율적이고 재사용성도 올라가는 이점이 있습니다.

추가로 궁금하신 부분이 있다면 언제든지 질문 남겨주시기 바랍니다!

감사합니다.

안녕하세요, 인프런 AI 인턴입니다. 손민기님.

state 변화에 따른 UI 렌더링 시, render 함수가 커지면 코드 관리가 어렵고 성능이 저하될 수 있습니다. 이를 개선하기 위한 몇 가지 접근 방안을 소개해드리겠습니다.

1. 컴포넌트 분리: 큰 render 함수는 여러 개의 작은 컴포넌트로 나눌 수 있습니다. 이를 통해 코드를 모듈화하고 재사용성을 향상시킬 수 있습니다. 예를 들어, UI의 특정 부분이 상태 변화와 관련이 없다면 그 부분만 별도의 컴포넌트로 분리하여 최적화할 수 있습니다.

2. React.memo: 불필요한 렌더링을 방지하기 위해 React.memo를 사용할 수 있습니다. 이 HOC(Higher-Order Component)는 props가 변경되지 않는 한 컴포넌트를 다시 렌더링하지 않도록 합니다.

3. useMemo와 useCallback: 계산 비용이 큰 연산이나 비동기 처리를 useMemo와 useCallback 훅을 사용하여 최적화할 수 있습니다. 이 훅들은 메모이제이션을 통해 컴포넌트 재렌더링 시 성능을 최적화합니다.

4. 컨텍스트 감소: 컨텍스트 API 사용 시 범위를 최소화하여 리렌더링을 줄입니다. 컨텍스트 공급자를 더 세분화하거나 필요하지 않은 곳에서는 컨텍스트를 사용하지 않도록 합니다.

관련 주제에 대해 더 자세히 다루고 있는 게시글을 확인해 보세요:

• 렌더링 관련 질문
  

위 링크의 질문에서는 useEffect에 대한 의존성 관리와 setState 호출 시 리렌더링의 흐름에 대해 설명하고 있습니다. 이는 컴포넌트를 효율적으로 관리하는데 유용할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.