Project/React.js (3) 썸네일형 리스트형 React Jotai npm install jotai Jotai 특징Redux는 reducer 당 하나씩 state 만듬, state여러개가 필요하면 reducer를 여러개 만들어서 결합해야 함. Jotai는 atom 사용(reducer 대신 atom 사용), 필요한 state를 원자(atom)단위로 만들어서 사용atom으로 생성, useAtom 사용useState와 유사, 컴포넌트 간에 공유됨 Jotai가 Redux보다 훨씬 직관적이고 간단하다. state 변수가atom을 사용하면 기본적인 스토리지에 생성되고,atomWithStorage를 사용하면 세션 스토리지에 저장된다. 선언한 state변수를 import하고, useAtom으로 사용하면 된다.useAtom은 상태 변수와 상태 변수를 변경할 수 있는 함수를 리턴한다. 아.. React Hook/React Redux React Hook클래스형 컴포넌트에는 사용 불가(함수형에서만 사용)use가 들어가는 건 모두 Hook(useState, useEffect 등)컴포넌트 내에서 사용함.(컴포넌트끼리 공유 불가) useEffect의존성을 줄 수 있음[] 주면 한 번만 실행[변수명] 변수 넣으면 특정 변수가 변경되면 실행 useContext컴포넌트 간에 공유되는 state 변수가장 밖에 태그를 정의해야함. 처럼 태그 안에 있는 것만 적용한계가 있으므로 부모자식 관계 만들어서 prop 사용해도 됨. 원래는 다른 컴포넌트의 변수를 사용하려면 각 컴포넌트가 사용하지 않아도 중간에서 변수를 전달해줘야 함. useContext를 사용하면 createContext로 제공하는 컴포넌트에서 변수를 선언함 받는 컴포넌트에서 useConte.. React.js JavaScript 특징Javacomplie언어 -> 컴파일 시 .class파일(기계어) 생김, 실제 실행되는 파일은 .class파일.java는 소스파일프로젝트 clean은 .class 파일을 다시 만들게 함. JavaScript, Pythonscript언어(interpreter언어) -> 해석하는 언어, 기계어 파일이 따로 없음, 브라우저가 한 라인씩 보고 바로 실행시킴 React.js 특징Jsp, React 모두 브라우저에서 파싱될 때는 순수 HTML, JavaScript 코드로 바뀐다.(브라우저가 HTML과 JavaScript만 알아볼 수 있기 때문) 컴포넌트 기반(리엑트 Component를 상속받은 클래스를 컴포넌트라고 함) 프론트엔드 프레임워크컴포넌트 별로 파일을 따로 만든다. 컴포넌트는 보통 .. 이전 1 다음
