OCEAN-WARD BOUND

useReducer는 컴포넌트에 reducer를 추가하는 React Hook입니다.const [state, dispatch] = useReducer(reducer, initialArg, init?) 한 컴포넌트에서 state 업데이트가 여러 이벤트 핸들러로 분산되는 경우가 있습니다.const [tasks, setTasks] = useState(initialTasks); function handleAddTask(text) { setTasks([...tasks, { id: nextId++, text: text, done: false }]); } function handleChangeTask(task) { setTasks(tasks.map(t => { ..

useContext는 컴포넌트에서 context를 읽고 구독할 수 있는 React Hook입니다.const value = useContext(SomeContext) 기본 규칙useContext를 컴포넌트의 최상위 수준에서 호출하여 context를 읽고 구독합니다.import { useContext } from 'react';function MyComponent() { const theme = useContext(ThemeContext); // ... 매개변수1. SomeContext : createContext API로 생성한 context입니다. context 자체는 정보를 담고 있지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타냅니다. 반환값useContext는 호출하는 컴포넌..

useMemo는 리렌더링 사이에 결과를 캐싱할 수 있게 해주는 React Hook 입니다.const cachedValue = useMemo(calculateValue, dependencies) 기본 규칙컴포넌트의 최상위 레벨에 있는 'useMemo'를 호출하여 재렌더링 사이의 계산을 캐싱합니다.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 매개변수1. 캐싱하려는 값을 계산하는 함수 : 캐싱하려는 값을 반환하는 함수를 콜백으로 넘깁니다. 순수해야 하며 인자를 받지 않..

useCallback은 리렌더링 간에 함수 정의를 캐싱해 주는 React Hook입니다.const cachedFn = useCallback(fn, dependencies) 기본 규칙리렌더링 간에 함수 정의를 캐싱하려면 컴포넌트의 최상단에서 useCallback을 호출하세요.import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); ..

useEffect란?useEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook입니다. React의 함수형 컴포넌트는 순수 함수를 지향합니다. 여기서 순수 함수란 같은 입력이 주어졌을 때 언제나 같은 출력을 반환하는 함수를 말하며, React의 함수형 컴포넌트의 순수성은 같은 props와 같은 state 일 때, 언제나 같은 출력을 기대하는 것을 말합니다. 컴포넌트를 엄격하게 순수함수로 작성하면 코드베이스가 점점 커지더라도 예상밖의 동작이나 당황케하는 버그를 피할 수 있습니다. 하지만 React의 함수형 컴포넌트도 외부 환경에 영향을 받을 수 있습니다. 예를 들면 서드 파트 라이브러리를 연결하거나, API Request에 따른 데이터를 렌더링하거나, 데이터베이스를 연결하는 동작들이 있을 수..

useRef란?useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook입니다.const ref = useRef(initialValue); 기본 규칙컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언합니다.import { useRef } from 'react';function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... 매개변수useRef는 단일한 매개변수를 받습니다. 해당 매개변수는 ref 객체의 current 프로퍼티의 초기 설정값입니다. 어떠한 유형의 값이든 지정할 수 있으며, 해당 인자는 초기 렌더링 이후부터는 무시됩니다.반환값useRef는 단일 프로퍼티..

useState란?useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook입니다.const [state, setState] = useState(initialState); state란 컴포넌트의 기억 저장소라고 합니다. React Component가 Rerendering 될 때, 특정한 상태를 기억해야 하는 경우가 많습니다. 이 때 일반 변수는 컴포넌트 함수가 실행, 즉 Render될 때 기존의 값을 초기화하기 때문에 React에서는 useState란 hook을 제공하여 state라는 개념을 통해서 React가 해당 Component의 state를 기억하게 하여, Component의 Rendering 사이의 데이터를 기억할 수 있게 합니다. 기본 규칙useState는 컴포넌트의 최..