[노마드클론] React-기초2

초기세팅

1. node.js 설치
2. npm 설치
3. 프로젝트 저장할 폴더 생성

해당폴더로 이동
npx create-react-app [프로젝트명]

프로젝트 설치한 경로에서

code [프로젝트명]

요러면 vscode 에서 열림

그리고 필요 없는 파일들 지우고 정리하고 시작하믄 됨~

CSS 적용하기

하나의 CSS파일을 만들고 해당 파일을 index.js에 import하면 되지만
만약 내가 컴포넌트마다 각각 css를 적용하고 싶을 때는 이렇게 하면 중복 적용되어 수정이 불가피하게 된다.

그래서 기존의 css명.css -> css명.module.css 이렇게 해주면 나중에 index.html에서 브라우저에 출력할 때 클래스명 등이 중복되어도 겹치지 않고 각각 스타일을 적용해준다.

아래와 같이 그냥 적용해도 되고

.button {
  color: white;
  background-color: tomato;
}
import './Button.module.css';

좀 더 세밀하게 적용하고 싶다?

.btn {
  color: white;
  background-color: tomato;
}
//Button.js // styles에 css의 스타일들이 객체로 할당됨
import styles from './Button.module.css';
//Button 컴포넌트 내
return <button className={styles.btn}>{text}</button>;

• class명이 중복되도 module이 알아서 랜덤으로 바꿔준다.
  그래서 중복되도 css가 안깨짐.
  

useEffect

API를 불러오는 것과 같은 것은 렌더링될 때마다 재실행 되게 되면
트랙핑을 효율적으로 관리할 수 없고 앱 또한 무거워질 수 있다.

리액트에는 스테이트 변경으로 재렌더링될 때 해당 코드가 함께 랜더링 되지 않도록 할 수 있는 useEffect라는 훅이 존재한다.

useEffect(callbackfunction, deps.arry)

function Hello() {
  useEffect(() => {
    console.log('created  :)'); //Hello 컴포가 생성될 때
    return () => console.log('destroyed :('); // Hello 컴포가 제거될 때 Clean up function
  }, []);
  return <h1>Hello</h1>;
}

작동원리

  function destroyedFn() {
    console.log('bye :(');
  }
  function effectFn() {
    console.log('created :)');
    return destroyedFn;
  }
  useEffect(effectFn, []);
  return <h1>Hello</h1>;
}