키워드 검색기능

오늘(이번 주말)은 Nav에서 키워드를 입력하면 백엔드로 요청을 보내 키워드를 출력하는 기능을 만들었다.

이 기능을 작성할 때 까다로웠던 점은 리랜더링이라는 개념이였다.

리랜더링

• 리액트 컴포넌트의 상태나 속성이 변경되었을 때, 해당 컴포넌트가 업데이트되고 다시 렌더링되는 과정
• 가상 돔을 사용해 실제 돔과 비교하여 변경된 부분만 업데이트
• 컴포넌트의 리랜더링은 render() 메소드를 호출하여 가상 돔을 업데이트 하고 변경된 부분만 실제 돔에 반영됨.

컴포넌트 마운트

• 리액트에서 마운트는 해당 컴포넌트가 처음으로 실제 돔에 삽입되는 과정.

const [selectedButton, setSelectedButton] = useState<string>("");
...

if (selectedButton) {
      return (
        <div>
          {keywordComponent}
          <Row keyword={selectedButton} />
        </div>
      );

나의 프론트 코드중 일부인데 나는 selectedButton값이 바뀌면 Row로 보내는 props값이 변하기때문에 Row컴포넌트가 리랜더링 될 것이라 생각했다.

하지만 이는 리랜더링과 훅을 잘못 이해했기 때문이였는데 if문 안의 selectedButton 값이 변경되어도 이 조건문이 true인 것은 변함이 없기때문에 해당 컴포넌트는 다시 마운트 되지 않는다고 한다.

useEffect의 특징에 대해 알아보았는데 이 부분이 실행되는 경우는 두가지이다.
// 컴포넌트가 마운트되었을 때 최초 한 번 무조건 실행
// 의존성 배열 안의 값이 변했을 때
확실히 리랜더링되는 경우에 useEffect가 실행되지는 않는다!!

때문에 selectedButton의 값이 아무리 바뀌고, Row컴포넌트로 다른 props를 보내도 Row컴포넌트 안의 useEffect가 실행되지 않기 때문에 영상이 변하지 않던 것이다.

 useEffect(() => {
    const fetchMovie = async () => {
      const movieData = await findByKeyword(props.keyword);
      setLoading(false);
      setMovies(movieData);
    };
    fetchMovie();
  }, [props.keyword]);

결국 props의 값이 변하는 경우는 useEffect에서 캐치하도록 만들어 해결했다.

오늘은 랜더링과 마운트의 개념을 몰라 발생한 문제를 끝끝내 이해해 문제를 해결할 수 있었다.

같은 회사의 프론트개발자님께 끈질기게 물어봤는데 죄송하면서도 감사하다.