분류 전체보기

[프론트엔드] REACT Context API [3]

이전 글 2022.03.30 - [프론트엔드/React] - [프론트앤드] REACT Context API [2] Provider 적용 이번에는 Provider를 사용하여 Context value 값이 변경되도록 구현 할 예정이다. App 컴포넌트를 먼저 다음과 같이 수정한다. - App.js Provider 안에 value 값을 지정해주지 않으면 dom이 동작하지 않으니 주의하자. import React from "react"; import ColorBox from "./components/ColorBox"; import ColorContext from "./contexts/color"; const App = () => { return ( ); }; export default App; 주의사항 reac..

[프론트앤드] REACT Context API [2]

이전 글 2022.03.30 - [프론트엔드/React] - [프론트엔드] REACT Context API [1] context api 사용법 익히기 먼저 튜토리얼 프로젝트를 아래 명령어로 생성해주자. yarn create react-app context-tutorial 새 Context 만들기 프로젝트가 생성되었으면 새로운 Context를 만들어보자. src/contexts/color.js contextx 디렉토리 생성 후 아래의 color.js 파일을 만든다. - color.js import { createContext } from 'react' // createContext() -> Context 제작 const ColorContext = createContext({ color: 'black'});..

[프론트엔드] REACT Context API [1]

context api란? React는 16.3 버전부터 정식적으로 context api (opens new window)를 지원한다.. 일반적으로 부모와 자식간 props를 날려 state를 변화시키는 과정과는 달리 context api는 컴포넌트 간 서로 간격이 없다. 즉, 컴포넌트를 건너띄고 다른 컴포넌트에서 state, function을 사용할 수 있다.. 또한 redux의 개념보다 context api는 Provider, Consumer, createContext 개념만 알면 적용할 수 있어서 사용이 간편하다. . context api 언제 쓰는가 프로젝트 내에서 "환경 설정", "사용자 정보"같은 전역에서 사용되는 데이터를 관리할 때는 상위 컴포넌트(APP)에서 props로 값을 하위 컴포넌트에..

[프론트엔드] REACT+MOBX 슈퍼마켓 구현

1. REACT+MOBX 이번에 회사에서 MOBX를 사용한 프로젝트를 개편하게 되었다. MOBX를 처음접하다 보니 이해하는 부분에 어려움이 있었고 프로세스를 이해하기 위하여 예제 파일을 클론코딩하면서 공부한 내용을 정리해둔다. 2. 화면 결과 - Githhub 주소 GitHub - S-YC/Mobx-Cart: Mobx 라이브러리를 사용한 슈퍼마켓 만들기 Mobx 라이브러리를 사용한 슈퍼마켓 만들기. Contribute to S-YC/Mobx-Cart development by creating an account on GitHub. github.com