React

React

라이브러리와 프레임워크 차이점

• 프레임워크는 모든 것들이 들어 있는 주머니이다. 대신 틀이 있기 떄문에 그 틀에 맞춰어 사용해야 한다.
• 라이브러리는 단 한 가지 문제를 해결하기 위해서 있는 것이다.
• 내가 원하는 것을 골라 쓸 수 있다. 페이스북 에서 UI를 해결하기 위해서 만들었다.

  리액트가 가지고 있는 철학

• UI를 표기하고 이벤트에 반응하는 라이브러리다.
• UI들을 컴포넌트 단위로 보여주고 이벤트로 반응하는 거라고 볼 수 있다.
• 독립적이다.

  CSR(클라이언트 사이드 렌더링)

• 웹팩이 내가 작성한 코드와 리액트가 동작하기 위한 코드를 압축해서 보여준다.
• UI를 표기 해준다.

  리액트 이벤트

• 이벤트 전파 시 함수를 연결해야 해줘야하고 리액트가 한 단계 감싸서 이벤트를 한다.
• 함수는 메모리 셀에 참조 값이기 때문에 함수를 연결을 해야한다. (즉시 함수 호출)
• 함수를 호출하면은 메모리셀에 있는 참조 값을 바로 부르기 때문에 잘못된 동작이 발생한다. (사용자가 버튼을 클릭할 떄 업데이트)

       함수를 즉시 호출하는 거고 setNumber(number + 1)
       아까 이게 오류난 이유가 애초에 함수인데 함수를 즉시호출해서 
       오류가 났다. 화살표함수로 한 번 더 감싸줘고 써야 한다. 
       함수를 연결 즉 참조해야 한다.
       const handleClick = () => {
            console.log('클릭 됨')
        }
        return (
            <div>
                <button onClick={handleClick}>button</button>

useState

• 내부 상태에 변경이 일어난다면(함수를 호출할 떄) 변경이 일어난다. 이전에 돔요소와 현재의 돔요소를 비교하여 변경을 해준다.
• Props를 전달 하는게 아니라 내부에 상태를 업데이트 한다.
• 내부 상태는 useState에서 간직하고 업데이트 해야 한다.

import React, {useState} from 'react';

const Conter = () => {
   const [number, setNumber] = useState(0);
    return (
        <div>
            <span>{number}</span>
            <button onClick={() => setNumber(number + 1)}>Add +</button>
        </div>
    );
};

export default Conter;

이 값은 1이다. 클릭이 호출되어 을떄 전달할때 스냅샷(찰칵) 하고 
저장된다. 렉시컬이바이먼트에 저장됨 
<button onClick={() => 
setNumber(number + 1) = 0 + 1
setNumber(number + 1) = 0 + 1
setNumber(number + 1) = 0 + 1
}>Add +</button>

여러번 업데이트 하거나 이전 상태 값을 토대로 +, - 이전 상태 값을
업데이트 하는 경우에는 콜백함수를 사용해야 이전 상태를 기억한다.
  <span>{number}</span>
  <button onClick={() => setNumber((prev) => prev + 1)}>Add +</button>

여러개의 함수를 호출하거나 같은 곳에서 호출해야 할떄는 이렇게
하면 된다
const handleClick = () => {
    setNumber((prev) => prev + 1);
    setCount();
};

useEffect

• 여러개 사용한다고 성능이 저하되지는 않는다.
• 하지만 필요에 따라서 하나의 useEffect 훅에서 하나의 일만 하도록 분리하는게 좋다.

import React from 'react';

const Products = () => {
    const [checked, setChecked] = React.useState(false);
    const [products, setProducts] = React.useState([]);
// 데이터를 가져오는 첫 번쨰 방법#1
// 다만 무한대로 계속 패치해서 데이터를 가져온다.
// 상태를 변경되었기 떄문에 값을 호출하고 변경 다시 호출 변경(무한 반복)
// 이럴 경우 유즈이펙트가 유용하다.
// 만약에 체크가 된다면 sale이라는 것을 붙여주고
// 아니라면 그냥 프로덕트를 제이슨을 불러와줘
    fetch(`data/${checked ? 'sale_' : ''}products.json`)
        .then(res => res.json())
        .then(data => setProducts(data));
    //딱 한 번만 실행함 ([])를 사용 시    
    useEffect(() => {
        fetch('data/products.json')
             .then(res => res.json())
             .then(data => setProducts(data));
             // 컴포넌트가 없어질 떄 무언가 청소를 해야한다면
             // 리턴을 사용 즉 우리가 메모리청소하는 것과 비슷함
             return () => {
            console.log('꺠끗하게 청소하는 일들을 해요.');
        }
        // 뭔가를 변경될떄마다 변경해줘 다시 불러와줘
        // 라는 뜻
    }, [checked])
    return (
        <div>
          <input id='products' type='checkbox' value={checked} onClick={() =>
            {setChecked((prev) => !prev)}} />
            <label htmlFor='products'>Show Only Hot Sale 😘</label>
            <ul>
                {
                    products.map((product, i) => (
                    // 성능향상을 위해서 꼭 키를 사용!!!
                        <li key={i}>{product.id}
                            <article>
                                <h3>{product.name}</h3>
                                <p>{product.price}</p>
                            </article>
                        </li>
                    ))
                }
            </ul>
        </div>
    );
};

export default Products;


import React from 'react';
import Products from "./components/Products";

const AppProducts = () => {
// 버튼 클릭 시 이 떄 Products컴포넌트가 호출되어 보여짐 
    const [showProducts, setShowProducts] = React.useState(false);
    return (
        <div>
            {showProducts && <Products/>}
            <button onClick={() => setShowProducts((show) => !show)}>
                Toggle
            </button>
        </div>
    );
};

export default AppProducts;