- create-react-app 세팅
- Effects 적용
react-for-beginners's Introduction
react-for-beginners's People
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
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, []);
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.