react
useContext 실습
컴포넌트 A, B, C, ... ,Z가 있다. 만약 A에서의 어떤 값을 Z까지 전달해주려면 어떻게 해야할까? 쉽게, 아래의 방법이 있을 것이다. const A = () => { const data = 'data'; return ( ) } const B = (props) => { return ( ) } const C = (props) => { return ( ) } // ..... const Z = (props) => { return ( props.data ) } A 컴포넌트의 data 값을 Z에서 사용하기 위해서, 중간 컴포넌트들의 props를 통해 계속 내려보내는 것이다. 이 방법을 prop drilling이라고 한다. 문제없이 잘 작동된다. 그런데 중간 컴포넌트들의 갯수가 1000개라면? 어느 세월에..
useMemo 실습
useMemo에서 Memo는 메모이제이션을 의미한다. 예를 들어 설명하자면, 알고리즘 해결 방법중 동적 계획법과 비슷하다고 생각하면 된다. 렌더링 시에 같은 값을 반복해서 계산해야될 때, 무의미한 연산 수를 줄이기 위한 훅이다. 메모리에 값을 저장해놓았다가 렌더링 시에 저장된 값을 비교하여 변화가 생겼을 때만 함수를 실행시켜주는 훅이다. // useMemo를 사용하지 않은 코드 import React, { useState } from 'react'; import ReactDOM from 'react-dom'; const App = () => { const [ text, setText ] = useState('default'); const handleChange = e => { const { value }..
hooks에서 useState가 const로 선언되는 이유
카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-state.html Using the State Hook – React A JavaScript library for building user interfaces ko.reactjs.org import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); // setCount를 통해 count 값이 바뀌는데 어째서 count인가? return ( You clicked {count} t..
react-redux 실습
// pakage.json { "name": "reduxtest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "babel": { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }, "author": "", "license": "ISC", "dependencies": {}, "devDependencies": { "@babel/cli": "^7.10.5", "@babel/core": "^7.10.5", "@babel/preset-env": "^7.10.4", "@babel/preset-react": "^7.10.4", "bab..
router 실습
// pakage.json { "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "babel": { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }, "dependencies": {}, "devDependencies": { "@babel/cli": "^7.10.4", "@babel/core": "^7.10.4", "@babel/preset-env": "^7.10.4", "@babel/preset-react": "^7.10.4", "babel-loader": "^8.1.0", "react": "^16.13.1", "react-dom": "^16.13.1", "rea..