[React] 리액트 기본 개념 정리, useState, useEffect

React

컴포넌트들의 집합체로 함수형으로 작성

내부 상태를 갖고 있는 state와 외부로 부터 전달 받은 속성인 props 그리고 나타내는 render로 구성

state나 props가 변경될 때마다 다시 렌더링되며 실제로 변경되는 부분만 화면에 업데이트 됨

 

기본 규칙

1. class 대신 className을 사용

2. 자바스크립트를 사용할 때엔 {}로 감싸줘야함

3. 컴포넌트는 단 하나의 태그를 반환해야함

 

useState

useState를 사용할 때에,

배열이 전달되는데 첫 번째에는 값을 가리키고 있는 변수와 값을 업데이트할 수 있는 함수로 구성됨

useState 내부에는 초기값 넣어주면 됨

const [count, setCount] = useState(0);

 

컴포넌트를 만들어 나갈 때 공통적인 데이터는 필요하고 제일 근접한 부모 컴포넌트에 두면 좋다

무언가 부모에게서 처리가 되길 원한다면 props로 전달해주기

 

useEfffect

특정한 상태에만 동작하고 싶은 함수가 경우 사용

페이지를 로딩할 때에 혹은,

특정 상태가 변경될 때만 데이터를 불러오고 싶을때가 이에 해당

    useEffect(() => 
    {
    fetch(`${checked ? 'data/sale_products.json' : 'data/products.json'}`)
    .then((res) => res.json())
    .then((data) => setProducts(data));
    }
    ,[checked]);