Frontend/React.js3 React의 상태관리(Redux, Recoil) Redux 리액트의 상태관리 라이브러리, state = props를 통해 전송되는 사용자 지정 변수 하위 컴포넌트로 state를 전달할 때, 바로 하위의 컴포넌트로만 전송이 가능 여러 컴포넌트가 중첩되는 경우 props 문법을 component 마다 작성해야 되는 경우가 생김 이럴 때 Redux 라이브러리를 활용하면 좋음 >>> state를 한 곳에 몰아서 보관 주요 state를 보관하고 필요한 컴포넌트에서 꺼내서 활용하면 됨 state를 활용한 작업을 일괄적으로 작성해두고 API처럼 호출해서 사용 가능 < 관리가 편함 (실제 활용 예시) redux toolkit으로 쓰면 더 쉽고 거기에 타입스크립트로 쓰면 큰 프로젝트 스케일링하기도 편함 쇼핑몰 장바구니 - 아이템 추가, 제거, 수량 변경 같은 걸 구현.. 2023. 2. 3. React의 component, state, props Component - React의 Component는 JSX라는 언어로 쓰여짐 - 화면을 Component 단위로 나누어 재사용성을 높임 - 각 컴포넌트는 render 함수를 통해 최상위 div 태그 1개로 그려짐 - 컴포넌트 초기화를 위해서는 constructor 함수를 활용하여 props 정의 State - 상위 컴포넌트의 정보 - 하위 컴포넌트로 props 값 전달 가능 - state 값이 변경되면, 해당 state를 가진 컴포넌트의 render 함수를 통해 화면이 다시 그려짐 + 개인 의견 Props - 하위 컴포넌트(태그)의 속성(attribute)로 전달되는 값 - props 변경시 하위 컴포넌트의 render가 다시 실행 됨 + 개인 의견 업무할 때 MVVM 디자인패턴만 사용하다가 리액트 기.. 2023. 1. 31. React 환경설정 및 구동 설치 Git, Visual Studio Code, Node.js (LTS) Command 창에서 명령어 실행 1. node -v, npm -v 실행으로 Node.js 설치 확인 npm : node.js로 만들어진 프로그램을 쉽게 설치할 수 있게 도와주는 앱스토어 같은 역할.. npx : 임시로 설치 후 삭제, 컴퓨터 용량 확보 가능, 늘 최신상태로 설치 가능 npm install -g create-react-app create-react-app -V // version check 2. 탐색기에서 workspace 생성 후 기본 react 웹앱 생성 create-react-app . 3. 로컬 환경에서 구동 npm run start npm start 4. 파일 수정 5. git push 확인이 필요했던 부.. 2023. 1. 20. 이전 1 다음
