React learning #5create react app,css Modules,useEffect,cleanUp
create react app
https://ko.reactjs.org/docs/create-a-new-react-app.html
새로운 React 앱 만들기 – React
A JavaScript library for building user interfaces
ko.reactjs.org
npx create-react-app my-app
cd my-app
npm start
index.js에서
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
만 남겨두고 나머진 삭제
src 폴더 안에 index.js app.js 빼고 다 삭제.
지금까지 한 일 create app 하고 - npm start후 - 불필요한 파일 정리
별도의 환경설정이 필요 없습니다.
npm i prop-types 설치하고 import 후 prop설정 함
CSS modules
일괄적으로 index.js에 css 적용이 아니라 각각 분리해서 적용가능
Button.module.css 라는 css 파일 만든 후
.btn {
background-color: red;
}
Button.js
import PropTypes from "prop-types";
import styles from "./Button.module.css";
function Button({ text }) {
return <button className={styles.btn}>{text}</button>; //create-react-app은 CSS코드를 javascirpt object로 변환시시켜 줌 ! 그리고 html창에서보면 랜덤한 클래스 네임을 갖고있음
}
Button.propTypes = {
text: PropTypes.string.isRequired,
};
export default Button;
useEffect
import {useState} from "react";
const [counter, setValue] = useState(0);
-> 리액트 앱으로 하는 중이라 앞에 React 안붙여도됨
state를 변경할 때 ‘모든’ code 들을 항상 다시 실행됨
첫 번째 render에만 코드가 실행되고 다른 state변화에는 실행되지 않도록 만들자
예) API를 상태가 변할 때마다 불러오지않고 처음 렌더링 할 때만 불러오자
useEffect
두개의 인자를 가짐
첫번 째 인자: 실행 될 callback 함수
두번 째 인자: 배열,dependency(지켜볼 대상)
두번째인자 의존값이 처음으로 생성 됐을 때와 변경 될 때 이펙트 함수가 실행된다.
두번 째 인자가, 빈배열이라면 우리 코드를 한 번만 실행 하게 도와주는 react 기능
컴포넌트가 최초로 렌더링 되는 마운트 (mount)시에 단 한번 실행 됨.
인자를 넣지 않으면 일반 함수를 실행하는 것과 같아 useEffect사용할 필요성x
function App() {
const [counter, setCounter] = useState(0);
const [keyword, setKeyword] = useState("");
const onClick = () => setCounter((prev) => prev + 1);
const onChange = (event) => setKeyword(event.target.value);
useEffect(() => console.log("call the api"), []); //한 번만 실행 됨
useEffect(() => {
if (keyword !== "" && keyword.length > 5) {
console.log("SerachFor", keyword);
}
}, [keyword]); //keyword가 변화할 때마다 실행됨, 위에if문으로 제약을 줌
console.log("irun allthe time");
useEffect(() => console.log("I change keyword"), [keywrod,counter]); //keyword나 counter가 변경될 때 실행 됨
정리
• 리액트를 사용하는 이유: 최소 단위의 렌더링을 위해
• useState(): 변수와 변수를 수정하는 함수로 구성, 해당 부분의 리렌더링을 위함
• props: 태그의 속성 값을 함수의 인자로 컴포넌트에 값을 전달해준다.
• useEffect(): 코드의 실행 시점을 관리할 수 있는 선택권을 얻는 방어막 같은 존재, 디펜던시가 없을 경우 최초 1회 실행, 있을 경우 해당 값이 변할 경우 실행한다. 이 때 디펜던시는 여러개 입력이 가능하다.
🏴 부모 컴포넌트에서 리렌더링이 일어날 경우 모든 자식들이 리렌더링이 된다.(wa can use memo)
🏴 propType을 설치하고 props의 타입을 지정해 줄 수 있다. 이 때 isRequired로 필수값을 지정 가능
Clean up Effect
클린업 함수는 useEffect의 return 값으로 정의하는데, 컴포넌트가 삭제될 경우 함수가 실행된다.
컴포넌트 사라질 때,파괴될 때 분석결과를 보낸다던가
useEffect(() => {
(이펙트 함수)
return {
(클린업 함수)
};
}, [의존값]);
위 코드로 언제 create됐고 destroy 됐는지 확인가능
function Hello() {
useEffect(() => {
console.log("hi"); //처음에 나타날 때 실행 될 코드
return () => console.log("bye"); // 사라질 때 실행 될 코드
}, []);
return <h1>hi</h1>;
}
function App() {
const [showing, setShowing] = useState(false);
const onClick = () => {
setShowing((prev) => !prev);
};
console.log("i run all the time");
return (
<div>
{showing ? <Hello /> : null}
<button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
</div>
);
}
정리(clean-up)를 이용하는 Effects
위에서 정리(clean-up)가 필요하지 않은 side effect를 보았지만, 정리(clean-up)가 필요한 effect도 있습니다. 외부 데이터에 구독(subscription)을 설정해야 하는 경우를 생각해보겠습니다. 이런 경우에 메모리 누수가 발생하지 않도록 정리(clean-up)하는 것은 매우 중요합니다.
effect에서 함수를 반환하는 이유는 무엇일까요?
이는 effect를 위한 추가적인 정리(clean-up) 메커니즘입니다. 모든 effect는 정리를 위한 함수를 반환할 수 있습니다.
React가 effect를 정리(clean-up)하는 시점은 정확히 언제일까요?
React는 컴포넌트가 마운트 해제되는 때에 정리(clean-up)를 실행합니다. 하지만 위의 예시에서 보았듯이 effect는 한번이 아니라 렌더링이 실행되는 때마다 실행됩니다. React가 다음 차례의 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect 또한 정리하는 이유가 바로 이 때문입니다.
https://ko.reactjs.org/docs/hooks-effect.html#effects-with-cleanup