프론트엔드/리액트11 [React] Context API란 뭘까? context api란?- useState로 상태 관리시 하위컴포넌트로 props 내려줄때 관계없는 컴포넌트에도 그저 전달용으로 여러컴포넌트를 거치는 문제인 props drilling을 해결해주고 상태를 전역관리 할 수 있게 해주는 도구 예시const Mycontext = createContext(); //전역에서 사용할 context(문맥) 객체 만든다-필수//상태 전달해주는 Provider 컴포넌트 정의(하위 컴포넌트들을 감싸준다)function Provider({children}) { const [value, setValue] = useState('초기값') //초기state설정 //value와 setValue를 mycontext통해서 하위컴포넌트에 전달 return( {c.. 2025. 7. 6. [React] useReducer에 대해서 공부하기 무엇인가?- useState를 이용하다보면 상태가 복잡해질때 코드가 지저분 해질때가 있다. 그렇게 되면 관리도 어려워 지는데그래서 나온게 useReducer 사용법?- 간단하게 버튼을 클릭하면 +1이 되는 카운터를 만든다고 해보자const initialState = {count: 0}; //초기값 정의function reducer(state, action) { //현재 state와 action을 받아서 새로운 상태를 반환하는 함수 switch (action.type) { case "increment": // 타입이 increment면 count+1 return {count: state.count + 1 }; case "decrement": //타입이 decrememnt면 count.. 2025. 7. 5. [React] Debounce && Throttle: 개념, 장단점, 예시 ` React에서 Debounce와 Throttle에 대해서 알아보자 ` React 어플리케이션에서 사용자 입력이나 이벤트가 빈번하게 발생 시 , 성능 문제를 야기 할 수 있다.예를 들어 , 검색창에 한 글자 입력 할 때마다 API 호출을 하거나, 스크롤 이벤트 처리할 때마다 복잡한 계산을 수행한다면 불필요한 리소스 낭비가 발생할 수 있다.이런 문제를 해결하기 위해서 Debounce와 Throttle을 사용할 수 있다. 1. Debounce 1) 개념, 작동방식기본적으로 debounce와 Throttle 모두 특정 함수의 실행을 제한하는 목적을 두고 있는데, 이 녀석은 특정 기간 안의 함수 실행을 모두 취소하고 마지막에만 실행한다 디바운스는 지정해놓은 시간 동안 다시 한번 함수가 재호출되면 기존.. 2025. 6. 11. React.Memo, useMemo, useCallback은 무엇인가 1. React의 렌더링과 최적화React 컴포넌트는 상태(state)나 속성(props)이 변경되면 다시 렌더링된다. 이때 부모 컴포넌트가 렌더링 되면 기본적으로 모든 자식 컴포넌트도 함께 렌더링이 일어나는데, 자식 컴포넌트가 실제로 변경된 값이 없다면 이런 리렌더링은 성능 저하를 유발 할 수 있다. 이때 Memoization을 사용하면 좋다. 2. Memoization메모이제이션이란 수행한 연산의 결과값을 저장해 기억해두고, 동일한 입력이 발생하면 재활용하는 프로그래밍 기법. 적재적소 사용시 중복 연산 피할 수 있기에 어플리케이션의 성능 최적화가 가능 해진다.useCallback과 useMemo는 메모이제이션 기능을 제공하는 React의 내장 hook으로 퍼포먼스 최적화를 위해 사용 됨. 2. R.. 2025. 6. 10. 이전 1 2 3 다음
