개발의 시작과 끝

Redux Javascript app을 위한 예측가능한(predictable) state container이다. 리액트 뿐만 아니라 Augular, jQuery, vanilla JavaScript 등 다양한 framework와 작동되게 설계되었다. 즉, 리액트만을 위한 Library는 아니지만 React에서 현재 가장 많이 사용되는 State관리 라이브러리다. React는 React컴포넌트에서 개별적으로 state를 관리한다. 그러나 Redux를 사용하면 state를 별도의 전용 장소인 store에서 상태를 관리하고 React Component에서는 그걸 보여주기만 하는 용도로 사용한다. 참조 - velog.io/@yujo/React%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB..

useRef useRef Hook은 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해준다. 리액트를 개발하다 보면 DOM에 직접적인 접근을 해야 할 때가 있는데 이때 ref를 사용한다. input / textarea 등에 포커스를 해야 할때 특정 DOM 의 크기를 가져와야 할 때 특정 DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때 외부 라이브러리 (플레이어, 차트, 캐로절 등) 을 사용 할 때 또한, 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리할 수도 있다. Average 컴포넌트에서 등록 버튼을 눌렀을 때 포커스가 input 안쪽으로 넘어가는 코드 Average.js import React, { useState, useMemo, useRef } from 'react'; cons..

useCallback useCallback은 useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다. useMemo에서 구현한 Average 컴포넌트를 보면, onChange와 onInsert라는 함수를 선언했는데, 이렇게 선언하게 되면 컴포넌트가 리렌더링 될 때마다 이 함수들이 새로 생성된다. 대부분은 이러한 방식이 문제가 되지 않지만, 컴포넌트의 렌더링이 자주 발생하거나, 렌더링해야 할 컴포넌트의 개수가 많아진다면 이 부분을 최적화해주는 것이 좋다. Average.js import React, { useState, useMemo, useCallback } from 'react'; cons..

useMemo useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 리스트에 숫자들을 추가하면 해당 숫자들의 평균을 나타내는 함수형 컴포넌트 Average.js import React, { useState } from 'react'; const getAverage = numbers => { console.log('평균값 계산중..'); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = useState([]); const [number, s..

useReducer useReducer는 useState보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook이다. reducer는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수이다. reducer 함수에서 새로운 상태를 만들 때는 꼭 불변성을 지켜주어야 한다. function reducer(state, action) { return { ... }; // 불변성을 지키면서 업데이트한 새로운 상태를 반환합니다 } 액션 값은 주로 다음과 같은 형태로 이루어져 있다. { type: 'INCREMENT', // 다른 값들이 필요하다면, 추가로 들어감 } Redux에서는 액션 객체는 어떤 액션인지..

useContext 이 hook을 사용하면 함수형 컴포넌트에서 Context를 보다 쉽게 사용할 수 있다. 여기서 Context는 주로 전역적으로 데이터가 사용돼야 할 때 사용된다. ContextSample.js import React, { createContext, useContext } from 'react'; const ThemeContext = createContext('black'); const ContextSample = () => { const theme = useContext(ThemeContext); const style = { width: '24px', height: '24px', background: theme }; return ; }; export default ContextSamp..

useEffect useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate를 합친 형태로 봐도 무방하다. useEffect(() => { console.log('렌더링이 완료되었습니다!'); console.log({ name, nickname }); }); 마운트 될 때만 실행 만약 useEffect에서 설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트할 때는 실행할 필요가 없는 경우엔 함수의 두 번째 파라미터로 비어있는 배열을 넣어주면 된다. useEffect(() => { console.log('마운트 될 때만 실행됩니다.'); }, ..

useState 가장 기본적인 훅으로서, 함수형 컴포넌트에서도 가변적인 형태를 지니고 있을 수 있게 해준다. 컴포넌트에서 동적인 값을 상태(state)라고 한다. 리액트에서는 이러한 동적인 값의 상태를 관리하기 위해 useState라는 함수를 쓴다. 함수형 컴포넌트에서 상태를 관리해야 하는 일이 발생한다면 이 Hook을 사용하면 된다. Counter.js import React, { useState } from 'react'; const Counter = () => { // 비구조화 할당 문법 // ()안에는 기본값(초기값) const [value, setValue] = useState(0); return( 현재 카운터 값은 {value} 입니다. setValue(value + 1)}>+1 setValu..