Create React App

"Divide & Conquer"

① node.js를 설치하고 아래의 명령어를 터미널에서 실행한다.

node -v

② 아래의 명령어를 실행할 수 있다면, 준비 완료.

npx

③ 계속 입력하고 실행하자. (※ 디렉토리 내로 이동한 후 실행)

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

④ PropTypes를 체크하기 위해 아래의 명령어를 입력하고 install한다.

npm i prop-types

⑤ 설치가 끝나면 prop-types로부터 PropTypes를 import한다.

import PropTypes from "prop-types";

💡 특정 컴포넌트를 위한 CSS파일을 만들 수 있도 있다. 일종의 모듈화라고 보면 된다.

• Button.module.css
  ↳ create-react-app은 위의 css를 자바스크립트 객체로 변환시킨다. 🐶🍯

<style>
.btn {
    color: #e3d7b8;
    background-color: #ff6289;
}
</style>

• Button.js
  ↳ Button.module.css를 import하면, Button.js를 위한 CSS 모듈이 된다.

<script>
import styles from "./Button.module.css";
function Button({text}) {
    return (
        <button className={styles.btn}>
            {text}
        </button>
        );
}
</script>

➡️ 이로써, 'styles' 객체는 'btn'이라는 프로퍼티를 갖게 된다.

useEffect

코드를 언제 실행할 지 선택할 수 있도록 해주는 function
컴포넌트가 새로운 데이터를 받아서 다시 랜더링될 때, 컴포넌트 안의 모든 코드들도 재실행된다.
useEffect를 사용하면, 매번 재실행될 필요가 없는 코드를 제어할 수 있다.

- argument

(effect: React.EffectCallback, deps: React.DependencyList)
deps가 change될 때, effect가 작동한다. deps값이 없다면, effect는 컴포넌트가 처음 랜더링될 때 한 번만 실행된다.

- cleanup function

컴포넌트가 destroy될 때, 실행되는 함수. 컴포넌트의 "생성-파괴" 를 알 수 있다.
아래의 코드에서 함수 byeFn()은 컴포넌트 Hello()의 cleanup function이다. useEffect를 통해 hiFn()이 실행되면 byeFn()을 반환하고, 이로써 컴포넌트가 랜더링되었다는 것을 알 수 있다.

<script>
import { useState, useEffect } from "react";

function Hello() {
	function byeFn() {
		console.log("bye!");
	}
	function hiFn() {
		console.log("I'm here!");
		return byeFn;
	}
	useEffect(hiFn, []);
	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>
	);
}

export default App;
</script>

이러한 형태의 function을 실제로 많이 쓰지는 않는다.
아래와 같은 코드로 더 간결하고 직관적으로 컴포넌트의 "생성-파괴" 를 알 수도 있다.
useEffect 안에 byeFn()를 직접 넣어 위의 코드와 같은 기능을 하도록 만들어 보자.(두 가지 방식임)

<script>
	useEffect(() => {
		console.log("I'm here!");
		return () => console.log("bye!");
	}, []);

	useEffect(function () {
		console.log("I'm here!");
		return function () {
			console.log("bye!");
		};
	}, []);
	return <h1>Hello</h1>;
}
</script>