React useState와 useEffect 활용해서 우리집 고양이 불러오기

useEffect를 적극 활용해서 웹사이트에 동적인 효과를 주는 방법을 터득했다.

일단, react 사용한다면 몰라서는 안되는 개념 state에 대해 알아본다.

State란?

state
변수 대신 쓰는 데이터 저장 공간

Q.state 왜 쓰는데?

state가 변경될 때 새로고침 없이 재렌더링이 가능하다.
자동으로 재렌더링이 된단 말,
때문에 부드러운 화면 전환이 가능하다.

Q.state 언제씀?

중요한 변수, 자주 바뀌는 변수는 state에 담아라.

Q.state 특징은?

state는 직접적으로 변경이 불가능하다.
state를 변경하려면 useState를 사용한다.

버튼 클릭하면 사진 나오게 하기

import React, { useEffect, useState } from 'react';

function App() {

  let [click,setClick]=useState(false);


  return (
    <div className='App'>
      <div className='black-nav'>
        <h3>고양이를 불러봅시다</h3>
      </div>
      
      <button onClick={()=>{setClick(!click)}} className="btn">야옹</button>

      {click && <Cat/>}

    </div>
  );
}

이 코드를 해석 해 보자면,

일단

1. click이라는 변수의 초기 값은 false로 설정했다.
2. Cat이라는 컴포넌트는 click의 값이 false일 때 안보이게 해둔다.
3. 버튼을 클릭하면 setClick의 값이 현재의 값과 반대가 된다.
   현재 click의 값이 false라면 true가 되고,
   true라면 false가 된다!

이제 버튼을 누르면 고양이가 나온다.

귀여운 우리 고양이를 보세요 놀랍게도 누워있는 자세임

근데 우리 고양이는 멋있으니까 등장할 때 멋지게 등장했으면 싶다.

useEffect란?

useEffect
렌더링 될 때 마다 특정 작업을 수행할 수 있게 해주는 Hook.
여기서 마운트, 언마운트라는 단어가 나오는데
마운트는 쉽게말해 등장하는 것 이라고 이해했다.
반대로 언마운트는 없어지는 것.

useEffect 활용법

1. useEffect( ()=> {} )
   콜백함수만 인자로 받는다.
   이 때는 컴포넌트가 랜더링 될 때 마다 실행된다.

2. useEffect( ()=>{}, [value] )
   콜백함수와 배열 두 가지를 인자로 받는다.
   이 때는 value의 값이 바뀔 때 마다 실행된다.

3.useEffect( ()=>{}, [] )
콜백함수와 빈 배열 두 가지를 인자로 받는다.
이 때는 화면이 처음 나타났을 때 한 번만 실행된다.

useEffect를 활용해서 사진에 애니메이션 효과 주기

function Cat (click) {

  let [fade,setFade] = useState('');


  useEffect(()=>{
     setFade('end') ;
  
      return ()=>{
          setFade('');
          console.log("클릭할때마다 useEffect 실행됩니다");
      };
  },[click]);

  return (
    <div>
      <img src='img/cat.png' className={'start '+ fade}></img>
    </div>
  );
};

**App.css에는 아래 코드를 넣는다.**

.start {
  transform: scale(0);
  width: 500px;
}
.end {
  transform: scale(1);
  transition :all 0.5s;
  width: 500px
}

Cat이라는 컴포넌트를 따로 만들었다.
let이라는 변수의 초기값은 빈 문자열이다.
useEffect함수는 click의 값이 변할 때 마다 실행될 것이다.
click은 상위 컴포넌트에서 사용 한 변수이기 때문에
인자로 전달했다.

이제 버튼을 누르면 변수 click의 값이 바뀌기때문에
사진이 등장하면서 useEffect가 실행된다.
useEffect의 return값은 useEffect를 종료했을 때 뱉어내는 결과라고 이해했다.

버튼 클릭하면 useeEffect가 fade값을 end로 만든다.
또 다시 버튼 클릭하면 useEffect는 return값을 뱉어낸다.

X 무한반복~~~

이 때 console창을 보면 useEffect hook이 제대로 돌아가고 있는지
확인할 수 있다!

이렇게 useEffect를 가지고 img의 className을 자유자재로 바꿀 수 있다!
버튼을 눌러서 fade값에 end가 들어갔을 땐 scale이 0에서 1로 0.5초동안 바뀌며 사진이 등장하게된다!!

결과물

good 용맹캣 완성