react. css, useState, useEffect

node.js에서 npm을 설치하고 create-react-app을 하게되면 지금까지 작성했던 것들이 간편하게 제공된다. 더 좋아진 점은 쉬운 모듈화!

js에서 state와 props를 생성하다가 문득 css는 어떻게 적용하지 싶었는데 따로 module.css 파일을 만들어서 컴포넌트 파일에 import해주면 된다. 

CSS Module

CSS Module 은 CSS 클래스를 불러와서 사용 할 때 [파일이름]_[클래스이름]__[해쉬값] 형태로 클래스네임을 자동으로 고유한 값으로 만들어주어서 컴포넌트 스타일 중첩현상을 방지해주는 기술이다. 이를 사용하기 위해선,
[파일이름].module.css 이런식으로 파일을 저장해야함! 

 

 그리고 js파일에서 import styles(이름) from "./App.module.css" 로 import한 후

function App() {
  return (
    <div>
      <h1 className={styles.title}>Welcome back!!!!!!</h1>
      <Button text={"Continue"}/>
    </div>
  );

className={styles.title} 이런식으로 사용한다. css파일 내부에는 .title{ ...  } 로 스타일 속성을 지정했다.
그리고 브라우저 개발자모드에서 확인해보면 h1태그 내에선 리액트에서 랜덤으로 부여한 이름을 확인할 수 있다.

다른 css파일에서 같은 class이름을 사용해도 작동한ㄷㅏㅋ 왜냐면 이름.class이름으로 호출하니까... 이것이 재사용성....!

---

useState( ); 사용시에도 import를 해주면 된다! 이전 게시물에서는 React.useState(); 이렇게 사용했었지...

지금 react-app에서는 import { useState } from "react" 후에 기존처럼 사용해주면 된다.

const [ counter, setValue ] = useState(0); 이렇게 React.는 빼고 작성

---

state가 바뀌면 리렌더링이 되는데 그걸 관리해주는 memo가 있었고, 또 한가지 useEffect를 사용하는 방법이 있다.

useEffect를 통해 언제 코드를 실행할지 선택권을 가질 수 있다.

useEffect 역시 import { useEffect} from "react" 로 임포트 후에 input태그를 통해 검색기능을 구현할 때를 예로들어, 아래와 같이 사용된다.

  function App() {
    const [keyword, seyKeyword] = useState("");
    const onChange = (event) => setKeyword(event.target.value); 
    
    useEffect(() => {
      console.log("Serch For", keyword);
    }, [keyword]);
    
    return (
      <div>
        <input
          value={keyword}
          onChange={onChange}
          type="text"
          placeholder="Search here..."
        />
      </div>
    );
  }

첫번째 인자가 한번만 실행될 코드
두번째 인자는 배열형식으로 작성하며, 지정한 data에 특정변화가 발생했을 때 코드 재실행

  useEffect(()=>{
    if(keyword !== "" && keyword.length > 5){
      console.log("SEARCH FOR", keyword);
    };
  }, [keyword]);  
  // 내부에서 if문으로 코드실행조건을 걸어주거나
  
  useEffect(()=> {
    console.log("i run when keyword & counter change")
  }, [keyword, counter]);
  // 감시할 데이터를 여러개 작성할 수 있다.

memo와의 차이점에 대해 생각해보았는데, memo는 컴포넌트를 인자로 받아서 그 컴포넌트 내의 state상태변화에 따라 비교해보고 렌더링을 해주는 반면 useEffect는 코드의 재실행 여부를 관리해주는 기능을 가지고 있는 것 같다.

 

++ CleanUp function

클릭하면 <h1>Hello</h1>가 show/hide되는 기능이 있는 버튼이 있을 때, h1이 나타나면 콘솔에 hello, 숨겨지면 bye를 나타낸다고 예를 들면 아래와 같이 useEffect를 사용할 수 있다.

function Hello(){
  useEffect(() => {
    console.log("created :)");
    return () => console.log("destroyed :("); 
  }, []);
  // 컴포넌트가 파괴될 때 return에 함수를 전달해 코드 실행 -> CleanUp function
  return <h1>Hello</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show" }</button>
    </div>
  );
}

컴포넌트가 생성될 때는 첫번째 인자에 실행될 코드작성, 컴포넌트가 사라질 때는 return에 함수를 전달해 실행될 코드 작성. 이걸 CleanUp Function이라고 한다.

가-끔 외부 데이터에 구독(subscription)을 설정해야 하는 경우나 React가 다음 차례의 effect를 실행하기 전, 이전의 렌더링에서 파생된 effect를 메모리 누수가 발생하지 않도록 정리할 때 사용한다고 한다.