search

beecomci / today_i_learned

0 stars 0 forks source link

[ReactJS로 영화 웹 서비스 만들기] Chapter #1 ~ #6 #22

Open beecomci opened 2 years ago

beecomci commented 2 years ago

📌 Why React

react, react-dom

📌 VanillaJS vs ReactJS

1. 처리 방식의 차이

2. createElement 대신 JSX로 더 손쉽게!

3. 컴포넌트 안에 다른 컴포넌트 넣기

📌 state

state 세팅

  1. 직접 값을 할당 : setState(state + 1)
  2. 함수 할당 : setState(state => state + 1)

Unit Conversion

Unit Conversion + select unit

📌 props

Why need props ?

React Memo

Prop Types

📌 CRA

설치 방법

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>;
}

image

📌 Effects

Why need Effects ?

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

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

Cleanup function

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

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

useEffect(hiFn, []);
beecomci commented 2 years ago

🔍 증감 연산자

const [counter, setCounter] = React.userState(0);

onClick() {
  setCounter(counter + 1); 
}

// 증감 연산자는 counter에 값을 재할당하므로 const인 counter에서는 read-only 오류 발생
onClick() {
  setCounter(counter++); 
}
beecomci commented 2 years ago

🔍 SyntheticEvent

네이티브 이벤트 객체와의 차이점

1. Event Pooling

2. Asynchronous Problem

3. Debounce SyntheticEvent

React v17