리덕스와 마찬가지로 글로벌하게 상태관리가 가능하다. 다만 따로 설치하지 않아도 리액트에서 기본으로 지원하는 API기 때문에 호출해서 쓰기만 하면된다. 사용법 예제) 인풋과 텍스트는 형제 컴포넌트이지만 context api를 이용하여 인풋에서 작성한 값을 텍스트가 받아 폰트 크기를 변화시킴. 1. 먼저 글로벌하게 관리할 state를 모아놓을 provider(store)를 만든다. application_context.js import React from 'react'; import { createContext, useContext, useState } from 'react'; const Context = createContext(); //createContext 선언 export function Applic..
---옵션선택--- {(optionValue || []).map((options, idx) => ( {options} ))} 위와같이 selected 를 사용했을시 나타나는 경고이다. react에서는 selected 를 사용하는 대신 최상위 select 에 defaultValue 를 지정하여 그놈을 맨처음 보이게 할 수 있다. ---옵션선택--- {(optionValue || []).map((options, idx) => ( {options} ))} 요런식으로. disabled 는 선택 안되게 막아주려고 넣음 https://ko.reactjs.org/docs/forms.html
const handleCartValue = () => { {selectOption[0] ? setState(true) : setState(false)} } 이 과정에서 뜨는 문법 오류(경고) 정상 작동은하지만 짜증나게 노랗게 떠있으니 여간 거슬리는게 아니다. esLint 쓰면 자동으로 교정해주니 좋지만 이 경우의 오류는 본질적으로 뭘 고치길 원하는 것일까? 그냥 써있는 그대로다. 중첩되어있다는것이니까 풀어주면 사라진다. const handleCartValue = () => { selectOption[0] ? setState(true) : setState(false); }; 이런식이나 const handleCartValue = () => selectOption[0] ? setState(true) : set..
NPM(Node Package Manager) Node.js 에서 사용할 수 있는 모듈을 패키지화 하여 모아둔 저장소같은 개념. 개인이 자신이 만든 패키지를 공개할 수 있으며, 사용또한 쉽다. 보통 npm install -g create-react-app myreact 이런식으로 쓴다. install 대신 i 라고 써도 무방, 편한대로 쓰면 된다. 이렇게 리액트를 npm을 통해 설치하게 되면 온갖것들을 다 끌고와서 react를 설치하게 되고, 그놈들은 계속 컴퓨터에 남아있는 상태가 된다. 또한 버전의 업데이트가 이루어졌을시, 스스로 삭제후 재설치를 해주어야 하는 번거로움이 발생한다. 이때 사용할 수 있는것이 NPX(Npm Package Runner) 이놈을 이용해 create-react-app을 설치할 ..
객체나 배열을 풀어 쓸 수 있다. 배열 const arr = ["a", "b", "c", "d"]; 위 배열을 각각의 변수에 담아야 한다고 치자. 원래의 방법이라면 const arr = ["a", "b", "c", "d"]; const first = arr[0]; const second = arr[1]; const third = arr[2]; const fourth = arr[3]; console.log(first, second, third, fourth) 이렇게 써야 하지만 구조분해할당을 쓰게되면 const arr = ["a", "b", "c", "d"]; const [first, second, third, fourth] = arr console.log(first, second, third, fourt..
리액트를 사용하여 해당 돔에 직접 접근해야할때 useRef 를 사용할 수 있다. 밑은 과격한 예시이다. 기존의 200px 검은 정사각형이 버튼을 누르면 300px 빨간색 정사각형으로 바꾸는 예제이다. import React, { useRef } from "react"; //1. useRef 를 불러온다 const styled = { width: "200px", height: "200px", background: "black" }; export default function App() { const handleChange = () => { colorChange.current.style = "width:300px; height:300px; background:red;" //4. 해당 ref 이름과 curre..