Frontend/React

[React] 5. Hooks

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. DRF Token 연동하다가 안 되는 게 너무 화가 나서 React 속성 공부를 시작했더니 눈이 찢어질 것 같다. 목차 1. What is Hooks? 2. useState 3. useEffect 4. useReducer 5. useMemo 6. useCallback 7. React.memo 8. useRef 9. Costom Hooks 1. What is Hooks? Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 이전에 Component를 다룰 때, 언급된 내용이긴 하지만 좀 더 자세히 이야기 해보자. Hooks 기능이 개발된 ..

[React] 4. 컴포넌트 반복

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. JS map() function, Component array 2. key 3. Create & Delete 1. JS map() function, Component array map 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 기본적으로 알고 있어야 굉장히 편하다. arr.map(callback, [thisArg]); callback 함수의 param은 현재 처리하고 있는 요소, 요소의 index 번호, 원본 배열이며 thisArg는 callback 함수 내부에서 사용할 this 레퍼런스인데 선택사항이다. const arr = [1,3,5,7]; const m..

[React] 3. Component

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. What is Component? 2. Stateless Functional Component / Class Component 3. Create Component (ES6) 4. State 1. What is Component? 리액트로 만든 앱을 구성하는 최소단위. 비록 자바스크립트로 만든 Todolist지만 이걸 리액트로 만들고자 한다면 컴포넌트를 어떻게 구성할 수 있을까 실시간으로 시간을 보여주는 TodoTitle, 새로운 항목을 추가한 TodoInput, 할 일을 보여줄 TodoList 등의 여러가지 요소들로 나눌 수 있다. 각각의 컴포넌트는 단순히 템플릿의 기능으로 끝나지 않는다. props와 state에 따..

[React] 2. JSX

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. 리액트 파일 구조 2. What is JSX? 3. JSX 문법 1. 리액트 파일 구조 본격적으로 시작하기 전에 리액트를 처음 설치하면 생소한 것들이 엄청 많다. create-react-app 명령어를 bash에 쳐서 아무 앱이나 하나 생성해보자 여기서 App.js를 확인해보면 이렇게 코드가 작성되어 있다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 처음에 코드를 봤을 때, '이런 느낌이겠구나~'..