OCEAN-WARD BOUND

들어가며..안녕하세요, Ocean입니다. 입사한지 3개월 차인 우당탕탕 신입 개발자입니다. 이번에 팀장님에게 코드 리뷰를 받던 중 흥미로운 부분이 있어서 개발자 단톡방에서 질문도 하고 이야기도 나누고 했던 부분을 정리하고자 합니다. 1. 문제의 코드어떠한 상태를 변경하는 `StatusChangeButton` 컴포넌트입니다. Status를 업데이트한 후의 로직은 컴포넌트를 사용하는 모든 곳에서 같지만, 해당 Status가 어떤 주체의 상태인지에 따라서 api가 달라지기 때문에 mutate를 외부에서 받습니다.(*ex: 사람이라면 personMutate, 자동차라면 carMutate)또한 `mutate` 이후에 로직인 `refetch`와 쿼리 키 무효화를 위한 쿼리 키도 전달 받습니다.// 외부에서 muta..

forwardRef와 useImperativeHandle 정리안녕하세요, Ocean입니다.입사 준비를 하면서, 그동안 잘 알지 못했던 React API와 Hooks에 대해 정리하고 있습니다. 이번에는 비교적 간단하면서도 서로 연관성이 높은 forwardRef와 useImperativeHandle에 대해 알아보려고 합니다.이 두 가지는 컴포넌트의 명령형(Imperative) 접근 방식을 다룰 때 유용하며, React의 선언적 데이터 흐름과 조화를 이루도록 설계되었습니다. 이 주제를 간결하고 명확하게 정리해보겠습니다. 😊참고 글1. forwardRef - React2. useImperativeHandle - ReactforwardRefforwardRef는 React에서 컴포넌트가 부모로부터 전달된 ref를..

React에서 상태 관리와 클로저 문제 해결안녕하세요 Ocean입니다.최근 프론트엔드 면접에서 React에서 상태를 어떻게 관리하는지, 그리고 이 과정에서 발생하는 클로저 문제에 대해 질문을 받았습니다. 사실 이 문제는 생각해본 적이 없어서 답변을 잘 못했었는데, 여러 자료를 찾아보니 좋은 글들이 많았습니다. 그래서 이 기회를 통해 관련 자료들을 정리해보았습니다.참고 글1. React useState의 동작 원리와 클로저2. React Hook은 실제로 어떻게 동작할까? (번역)3. React Hooks: 마술이 아니라 그저 배열일 뿐이다 (번역)React의 useState훅은 함수형 컴포넌트에서 상태를 관리하는 중요한 도구입니다. 또한 useState는 클로저를 설명하는 아주 좋은 예이기도 합니다.이번..

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는 컴포넌트의 최..