lyuna's story

사용법 컴포넌트의 최상위 레벨에서 useRef를 호출하여 하나 이상의 ref를 선언한다.import { useRef } from 'react';function Stopwatch() { const intervalRef = useRef(0);  interval  ID를 저장했다가 나중에 불러와야 하는 경우 ref에 넣을 수 있다.ref 내부의 값을 업데이트 하려면 current 프로퍼티를 수동으로 변경해야 한다.function handleStartClick() { const intervalId = setInterval(() => { // ... }, 1000); intervalRef.current = intervalId;} 나중에 ref에서 해당 interval ID를 읽어 해당 Interval..

useRef란?React에서 제공하는 훅으로, DOM요소나 컴포넌트의 인스턴스를 직접 참조할 수 있게 해준다 이러한 상황에서 유용하다!!DOM요소에 접근 : 'useRef' 를 사용하여 특정 DOM요소에 접근하고 그 요소의 속성을 직접 변경할 수 있다.값 저장: 렌더링 간에 값에 저장하고 싶을 때 사용된다. 이 값은 컴포넌트가 리렌더링  되더라도 유지된다.포커스 제어 : 폼 요소의 포커스를 설정하거나, 다른 이벤트를 제어할 때 유용하다. useRef(initialValue) 컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다.import { useRef } from 'react';function MyComponent() { const intervalRef = useRef(0); con..

context를 통해 전달된 데이터 업데이트하기 시간이 지남에 따라 데이터를 동적으로 업데이트 하는 방법을 단계별로 풀어서 설명해보자.먼저 Context를 생성하고, Provider를 설정한다. Provider은 Context를 사용하고자 하는 컴포넌트들에게 데이터를 공급하는 역할을 하는데 , 여기서 state 변수를 선언하고 이를 Context의 value로 전달한다.이제 자식 컴포넌트에서 Context를 사용하여 데이터를 가져오고, 필요할 때 데이터를 업데이트 할 수 있다. 마지막으로 최상위 컴포넌트에서 Provider를 사용하여 전체 애플리케이션에 Context를 공급한다. function MyPage() { const [theme, setTheme] = useState('dark'); retu..

useContext란 ?React 에서 제공하는 훅 (Hook) 중 하나로, React 애플리케이션에서 전역적으로 상태를 관리하고 공유할 수 있도록 해준다. useContext를 사용하면 하위 컴포넌트들이 props를 통해 데이터를 일일이 전달받지 않고도 부모 컴포넌트에서 제공하는 데이터를 직접 접근할 수 있게 된다. Context :  데이터를 여러 컴포넌트들 사이에서 쉽게 공유할 수 있게 해주는 도구. 이전에 createContext로 생성한 context이다. context자체는 정보를 보유하지않으며,컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낼 뿐이다.예를 들어, 로그인한 사용자 정보나 테마 설정 같은 것을 여러 컴포넌트에서 사용해야 할 때 유용하다. Provider: 데이터를 공급해..

초기 state 재생성 방지하기 React는 초기 state를 한 번 저장하고 다음 렌더링에서 이를 무시한다.  React에서 useReducer를 사용할 때 초기 상태를 설정하는 방법에는 두가지가 있다.일반적으로 초기 상태를 두번째 인수로 직접 전달할 수 있지만, 초기 상태를 계산하는 함수가 무겁거나 복잡한 경우에는 세번째 인수로 초기화 함수를 전달하는 방법이 더 효율적이다. 이렇게 하면 초기 상태는 컴포넌트가 처음 렌더링될 때 한 번만 계산된다. 초기상태를 생성하는 함수 createInitialState , 이 함수는 초기 렌더링 시에만 호출되어야 하지만, 직접 초기 상태로 전달할 경우 모든 렌더링에서 호출될 수 있다. 특히 큰 배열을 생성하거나 복잡한 계산을 수행하는 경우 이는 성능에 영향을 미칠 ..

Useage 컴포넌트에 reducer 추가하기컴포넌트의 최상위 레벨에서 useReducer를 호출하여 reducer로 state를 관리한다. reducer 함수는 현재상태 (state)와 액션(action)을 받아서 새로운 상태를 반환한다.여기서 increment 와 decrement 두가지 액션을 처리하며, 각각 나이를 1씩 증가 또는 감소시킨다. Mycomponent 함수는 useReducer 훅을 사용하는 React 함수형 컴포넌트 이다.useReducer 훅은 { age:42}로 초기화된 상태와 상태를 업데이트 하는 dispatch 함수를 제공한다.컴포넌트는 현재 나이를 표시하고, 나이를 증가시키는 버튼과 감소시키는 버튼을 렌더링한다. 화면에 표시되는 내용을 업데이트 하려면 사용자가 수행한 작업을..

useReduceruseReducer는 컴포넌트 내에서 reducer 함수를 활용하여 상태를 관리할 수 있게 해주는React Hook 이다.useState의 대안으로 사용되며, 복잡한 상태 로직을 다룰때나 다음 상태가 이전 상태에 의존할 때 특히 유용하다. 컴포넌트의 최상위 레벨에서 useReducer를 호출하여 reducer 를 통해 state를 관리해라. 매개변수reducer : 상태가 업데이트 되는 방식을 지정하는 reducer 함수이다. 이 함수는 순수함수여야 하며, state와 액션을 인자로 받아들이고, 다음 상태를 반환해야한다.initialArg : 초기 상태가 계산되는 값이다. 이 값은 모든 유형의 값일 수 있다. 초기 상태가 이 값에서 어떻게 계산되는지는 다음 init 인자에 따라 달라진다..

첫째로, 렌더링 도중에 상태를 업데이트 할 때는 조건부로 업데이트를 수행해야 한다. 이때 조건은 이전상태 (prevCount)와 새로운 상태 (count)가 다른지를 확인하는 것이다. 이렇게 하면 불필요한 렌더링을 방지할 수 있다. 만약 조건 없이 상태를 업데이트 한다면 렌더링이 무한반복되어 앱이 깨질 수 있다. 둘째, 상태를 업데이트 할 때는 상태를 업데이트 하는 함수인 setPrevCount를 호출해야 한다, 이 함수는 이전 상태(precCount)를 새로운 상태 (count)로 업데이트 한다. 이를 통해 리액트는 상태 변경을 추적하고 필요한 경우에만 컴포넌트를 다시 렌더링 한다. 셋째, 렌더링 도중에는 현재 렌더링 중인 컴포넌트의 상태만을 업데이트 해야 한다. 다른 컴포넌트의 상태를 업데이트하려고..

객체 및 배열 state 업데이트 state에는 객체와 배열도 넣을 수 있다. 리액트에서 state는 읽기 전용으로 간주되기 때문에 기존 객체를 바꾸지 않고 교체를 해야한다. state에 form객체가 있는 경우에는 바꾸지마라. 대신 새로운 객체를 생성하여 전체 객채를 교체하면 된다.  초기 state 다시 생성하지 않기리액트는 초기 state를 한번 저장하고 다음 렌더링부터는 이를 무시한다.createInitialTodos()의 결과는 초기 렌더링에만 사용되지만, 여전히 모든 렌더링에서 이 함수를 호출한다. 이는 큰 배열을 생성하거나 복잡한 계산을 수행하는 경우 낭비가 될 수 있다. 이 문제를 해결하려면 useState에 초기화 함수로 전달하면 된다. 함수를 호출한 결과인 createInitialTod..

Usage사용법컴포넌트의 최상위 레벨에서 useState를 호출하여 하나 이상의 state 변수를 선언한다.배열 구조 분해를 사용하여 [something, setSomething] 과 같은 state 변수의 이름을 지정해야 한다.useState는 두 개의 항목이 있는 배열을 반환한다.이 state 변수의 현재 state로 처음에 제공한 초기 state로 설정된다.상호작용에 반응하여 다른 값을 변경할 수 있는 set함수 이다.화면의 내용을 업데이트 하려면 이 state로 set 함수를 호출한다.React는 다음 state를 저장하고 새로운 값으로 컴포넌트를 다시 렌더링한 후 UI를 업데이트한다. set 함수를 호출해도 이미 실행중인 코드의 현재 state는 변경되지 않는다.(예시) set함수는 다음 렌더링..