리액트 훅 useEffect를 JSX와 함께 사용해보자.

리액트 훅 useEffect를 JSX와 함께 사용해보자.

안녕하세요 이번 시간에는 예전 useEffect를 설명하며 빠트렸던 부분에 대해 설명하려 합니다.

 

리액트로 개발을 하다 보면 필연적으로 사용하게 되는 것이 useEffect입니다.

useEffect는 렌더링이 끝난 뒤 한번 실행되게 되며, 파라미터에 따라 무제한으로 변화에 따라 실행시키거나

파라미터로 지정된 state가 변화 시 실행되거나 혹은 정말 렌더링 후 딱 한 번만 실행시키는 등

다양한 방법이 존재합니다. 이는 아래의 링크에서 확인하실 수 있습니다.

 

https://ko-de-dev-green.tistory.com/18?category=865864

React hooks 리액트 훅 useEffect란?

또한 리액트로 작업을 하다 보면, 지금 당장은 필요하지 않지만, 후에 혹은 조건에 따라

useEffect를 실행시키고 싶은 경우도 생깁니다.

이럴 때 사용해 보실 수 있는 것이 useEffect를 JSX와 함께 사용하시는 것입니다.

 

아래의 코드의 경우 우리가 자주 사용하는 useEffect의 형태일 것입니다.

아래의 코드는 처음 hello라는 텍스트를 보여준 뒤 콘솔에 working!!이라는 로그가 남을 것입니다.

하지만 이는 아주 빠르게 실행되기에 사람이 인지하기란 쉽지 않죠.

이렇게 실행되는 코드의 장점은 코드가 실행되고 렌더링이 끝난 뒤 useEffect가 실행된다는 것입니다.

하지만 앞에서 말했듯 특정한 경우에만 useEffect를 실행하려는 경우 어떻게 해야 할까요??

const App = () => {

    useEffect(() => {
    	console.log("working!!");
    },[])

	return <div>hello</div>;
}

export default App;

 

 

일단 특정한 경우에 실행한다는 것은 어떤 경우일까요??

이러한 경우는 예를 들면, 조건에 따라 특별하게 렌더링 되어야 하는 JSX가 있을 시 좋습니다.

이를테면 Modal 같은 경우입니다.

이러한 경우 모달이 렌더링 되지 않는다면 useEffect의 사용을 줄일 수 있으니,

불필요한 성능을 낭비할 필요도 없습니다.

 

 

 

아래의 코드와 같이 변경하실 수 있습니다.

이렇게 사용되는 경우는 생각보다 적지 않습니다.

이 외에도 많은 방법들이 존재하지만, 오늘은 useEffect를 항상 component의 최 상단에서 사용하시는 여러분께

알려드리고 싶었습니다. 또한 이러한 코드는 fetching을 할 때도 좋습니다.

위에 언급했다시피 불필요한 useEffect의 사용을 줄일 수 있기 때문입니다.

특히 커스텀 훅을 이용하신다면 이와도 잘 어울립니다.

 

const App = () => {
    const Test = () => {
        useEffect(()=>{
            console.log("hello");
        },[])
        
        return null;
    }

    return (
        <div>
            <Test />
        </<div>
    );
    
}

export default App;

 

또한 당연히 아래의 코드와 같이 파라미터를 주어 조건에 따라 useEffect를 재실행하실 수도 있습니다.

이렇게 실행하시면 특정 필요한 상황에 useEffect를 발생시키고 그 후 state가 변화할때마다 

useEffect가 실행 될 것입니다.

 

const App = () => {
  const Test: React.FC<{ name: string }> = ({ name }) => {
    useEffect(() => {
      console.log('hello');
    }, [name]);

    return (
      <div>
        <p>{name}</p>
      </div>
    );
  };
  
  return (
      <div>
          <Test />
      </div>
  );
}

export default App;

 

마지막으로 오늘은 useEffect를 함수 안에서 실행시키고 return 값으로 jsx를 주어, 필요한 상황에만

useEffect를 실행하는 방법을 배웠습니다.

사실 사용 방법은 무궁무진 한것 같습니다. 항상 프로젝트나 상황에 따라 다르게 변화할 테니 말이죠.

저도 아직 배울게 투성이지만 여러분과 중요한 정보가 아니더라도 나눌 수 있어 정말 행복합니다.

오늘 하루도 무사히 마무리하시고 항상 좋은 일만 가득하시길 바랍니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung is das Gleiche, wie nie anzufangen.