전체 글

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

이전 글 2022.04.03 - [프론트엔드/React] - [프론트엔드] REACT Context API [6] useContext Hook 사용 이번에는 Context 값을 사용할 떄 Consumer -> Hook, static contextType 두가지 방법으로 방식을 변경 해보겠다. - ColorBox.js Consumer 을 사용했던 컬러박스 컴포넌트를 아래와 같이 useContext Hook으로 변경한다. Consumer 보다 코드가 훨신 간결해진다. 참고사항 Hook은 함수형 안에서만 동작한다. 클래스형 컴포넌트에서는 동작하지 않는다 따라서 useContext도 클래스형에서 동작하지 않는다. import React, { useContext } from "react"; import Color..

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

이전 글 2022.04.01 - [프론트엔드/React] - [프론트엔드] REACT Context API [5] 색상 선택 컴포넌트 선택하여 적용하기 이번에는 SetColors에서 마우스 왼쪽 버튼을 클릭하면 큰 사각형 색상을 변경하고, 오른쪽 버튼을 클릭하면 작은 정사각형 색상을 변경하도록 구현 해보겠다. - SelectColors.js 마우스 왼쪽 버튼은 onClick 이벤트로 구현하고 마우스 오른쪽 버튼은 onContextMenu 이벤트로 구현하다. import React from "react"; import { ColorConsumer } from "../contexts/color"; const colors = ["red", "orange", "yellow", "green", "blue", "i..

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

이전 글 2022.04.01 - [프론트엔드/React] - [프론트엔드] REACT Context API [4] 색상 선택 컴포넌트 만들기 이번에는 Context의 actions에 넣어준 함수를 호출 컴포넌트를 제작 할 예정이다. components. 디렉터리에 SelectColors.js 파일을 생성하여 아래의 코드를 작성한다. - SelectColors.js import React from "react"; const colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; const SelectColors = () => { return ( 색상을 선택하세요. {colors.map((color) => ( ))} ); }; e..

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

이전 글 2022.03.31 - [프론트엔드] - [프론트엔드] REACT Context API [3] 동적 Content 적용 content의 value에는 상태 값이 아닌 함수를 전달하는 것도 가능하다. 기존에 작성한 ColorContext의 코드를 다음과 같이 작성해보자. - color.js import { createContext, useState } from 'react' const ColorContext = ({ state: { color: 'black', subcolor: 'red'}, actions: { setColor: () => {}, setSubcolor: () => {} } }); const ColorProvider = ({ children }) => { const [color, s..