beecomci / react-for-beginners

React for Beginners

• create-react-app 세팅
• Effects 적용

react-for-beginners's Issues

CRA & useEffect

📌 CRA

• git repo : https://github.com/beecomci/react-for-beginners/
• commit #
• create-react-app (이하 CRA)는 react 프로젝트를 만들기 위한 환경의 총 패키지를 제공
• https://ko.reactjs.org/docs/create-a-new-react-app.html

설치 방법

npx react-create-app my-app
cd my-app
npm start

CSS Module

// 1. Button.module.css
.btn { background-color: tomato; } 

// 2. Button.js
import styles from './Button.module.css';

function Button() {
  return <button className={styles.btn}>Confrim</button>;
}

• CRA가 Button.module.css 코드를 JS 객체 형태로 변환시켜줌
• style도 module화 가능 -> 컴포넌트끼리 스타일도 독립적으로 분리 가능
• className에 객체화된 스타일의 클래스를 가져와서 랜덤한 이름의 클래스 생성
• 모듈화할 css 파일은 중간에 module을 붙일 것

• App 컴포넌트와 Button 컴포넌트에서 같은 title 이라는 className을 사용해도 HTML 내에서는 랜덤한 이름으로 생성되므로 서로 다른 className이 되어 중첩 문제 없음

📌 Effects

• repo : https://github.com/beecomci/react-for-beginners/

Why need Effects ?

• commit #
• React는 변화가 일어날 때마다 컴포넌트를 re-render 알아서 해줌 -> 이건 매우 편하지 !
• 그런데 어떤 경우에는 특정 코드들이 첫번째 render 될때만 실행되고 다른 state 변화에는 실행되지 않도록 하고 싶을 때가 있음
  아니면 특정 데이터가 변화할 때만 실행해야 할 때도 있고...
  • 예시) API를 가져오는데 글자를 입력할 때마다 state가 변경될 때마다 API를 가져오고 싶지는 않잖아 ? -> 매우 비효율적임
• useEffect(EffectCallback, DependencyList): 무언가 변화할 때 특정 코드가 실행되도록 설정 가능 / 언제 코드가 실행될지 설정 가능
  • EffectCallback : 실행시키고 싶은 코드
  • DependencyList
    • React가 지켜보는 값들을 배열로 입력, n개일 때 그 중 1개라도 변경되면 callback 실행
    • 초기값 빈 배열 [] 입력시 지켜볼게 아무것도 없기 때문에 최초 1회만 callback 실행

// AS-IS : 내가 원하는건 keword가 변화할 때만 실행되었으면 하는데, 처음 1번 실행되고 input 입력 이후부터는 해당 코드가 실행되지 않음
useEffect(() => { console.log("Search for", keyword); }, []); 

// TO-BE : keyword가 변화할 때 코드가 실행하고 싶다면, 두 번째 인자에 keyword 입력
useEffect(() => { console.log("Search for", keyword); }, [keyword]); 

Cleanup function

• commit #
• useEffect로 컴포넌트가 언제 create 되는지 뿐만 아니라 destroy 될 때도 알 수 있음
• useEffect의 첫 번째 인자 EffectCallback 함수가 return 하는 함수는 컴포넌트가 destroy 될 때 실행됨 -> Cleanup function
• 자주 사용하지는 않지만 특정 케이스에서 사용함

const byeFn = () => {
  console.log("destroyed"); // 컴포넌트가 destroy 될 때 실행됨
};

const hiFn = () => {
  console.log("created"); // Hello 컴포넌트가 create 될 때 맨 처음 1회만 실행됨
  return byeFn;
};

useEffect(hiFn, []);