[useEffect] React 컴포넌트 리랜더링 시키는방법 (게시글 아이템 불러오기)

---

간단하다! 컴포넌트를 리랜더링 시키고 싶으면 useEffect를 사용하면 된다. 

 

처음 코드를 작성했을 시 전반적인 Link 연결상태가 좋지않아 제대로 확인하지 못했던 문제점을 수정했다. 

 

  const url = window.location.href;
  const lastIndex = url.lastIndexOf("/");
  const urlNumber = url.substring(lastIndex + 1);

 

위 코드는 현재 url의 게시글 index번호를 불러오는 코드이다. (서버와 연결하지 않은상태라 임의의 데이터로 작업중)

 

게시글 목록중 하나의 게시글을 선택했을때, 그에맞는 상세 내용이 떠야하는데. 처음랜더링 된 게시글이 계속해서 뜨는 오류가 발생하고 있었다. 

 

따라서 컴포넌트가 호출될때마다 리랜더링해주며 그에맞는 게시글을 불러와주게 수정했다. 

 

 

useEffect

useEffect는 컴포넌트의 렌더링 결과물이 실제 DOM에 반영되고 부수 효과를 처리하기 위해 사용된다. 

 

useEffect는 보통 이럴 때 사용한다. 

 

- 컴포넌트가 처음 렌더링될 때 실행할 작업이 필요한 경우

 

- 특정 상태값이 변경될 때마다 실행할 작업이 필요한 경우

 

- 컴포넌트가 언마운트(삭제) 될 때 실행할 작업이 필요한 경우

 

우리는 두번째인 특정 상태값이 변경될때 필요해 useEffect를 사용할 것이다. 

 

 

  useEffect(() => {
    fetchData();
  }, []);

useEffect는 대충 이런식으로 생겼다. 

 

마지막에 보이는 [] 안에 변경될 상태값이 들어가면된다. 예를 들어 내 코드에 적용해보자면

 

 

  const [number, setNumber] = useState("");
  const url = window.location.href;
  const lastIndex = url.lastIndexOf("/");
  const urlNumber = url.substring(lastIndex + 1);

  useEffect(() => {}, [urlNumber]);

 

아까 설명했던 urlNumber가 변경될때마다 리렌더링 해줄 필요가 있었기 때문에, 이런식으로 작성만해도 정상적으로 작동되는 것을 확인 할 수 있었다. 

 

예시에서 처럼 리렌더링하며 실행해야할 함수가 없기 떄문에 괄호안엔 아무것도 적지 않았다.