NAN-NOO

https://react.dev/reference/react/act act – ReactThe library for web and native user interfacesreact.dev최근 테스트 코드 짜면서 많이 썼는데 뭔지 잘 몰라서 찾아봄 - API 중 유일하게 한글 번역이 안되어 있다!act는 테스트를 돕는 비동기 함수다. assertion 전에 대기중인 리액트 업데이트를 적용한다.예를 들어, 컴포넌트를 렌더링하고 업데이트를 하는 코드를 act로 감싸면 리액트가 브라우저에서 동작하는 것과 비슷하게 테스트할 수 있다.- 렌더링, 유저이벤트, 데이터 페칭과 관련된 모든 리액트 업데이트가 DOM에 적용되게 한다.React Testing Library 등에서 사용할 수 있는 함수들을 쓰면 act를 직접..

https://react.dev/reference/react/useInsertionEffect useInsertionEffect – ReactThe library for web and native user interfacesreact.devCSS-in-JS 라이브러리 개발자들을 위한 훅 - 아니면 그냥 useEffect나 useLayoutEffect 써라아무 layout 이펙트가 있기 전에 DOM에 요소를 삽입할 수 있게 한다.기본적인 동작은 useEffect 등과 비슷한데 실행 시점만 다른것 같다.useInsertionEffect 내부에서 상태 업데이트를 할 수 없다.useInsertionEffect가 실행될 때 ref는 아직 요소에 안 붙은 상태(null일 것임)DOM 업데이트되는 특정 시점에 의존해..

휴가 끝!리택트 19 버전의 서버 함수는 마이너 버전에는 변경이 없지만 서버 컴포넌트랑 같이 쓰려면 버전을 고정하는게 낫다라고 한다.서버 함수를 사용하면 클라 컴포넌트에서 서버에서 실행되는 비동기 함수를 호출할 수 있다. 호출하면 리액트가 서버에 함수를 실행하라는 요청을 보내고 결과를 반환한다.서버 상태를 업데이트하고 싶을 때(mutation)를 위해 설계되었고, 데이터 가져오기에는 권장하지 않는다.'use server'- 함수 각각에 표기할 수도 있고, 파일 최상단에 추가해서 모든 exports 요소들을 서버 함수로 표기할 수도 있다.- 서버 파일에서만 사용 가능하다. 결과물로 생성된 서버 함수의 참조값은 클라이언트에 전달할 수 있다(props로)- 비동기 함수에서만 사용가능- serializable한..

읽고 정리하는 거 까먹었다useId리액트도 Id는 ID가 아니라 Id 쓰네고유 아이디를 생성해서 쓸 수 있는데, 접근성 속성을 위해 하드코딩하는건 번거로우니까 이 훅을 활용하라고 한다.당연히 key 값으론 쓰지 말라고 하고(매번 달라지니까)근데 이게 상수로 선언한 변수를 쓰는 것과 큰 차이가 있는지는 잘 모르겠다. 컴포넌트를 재활용하는 경우 유용할 순 있겠다. 굳이 prop으로 조합하지 않고 동일한 컴포넌트를 선언해도 내부적으로 고유한 id를 사용하게 하려면?useDebugValue쓸 일이 많이는 없을 것 같다. console.log 최고!원하는 값을 인자로 전달해서 호출하면 리액트 개발자도구에서 볼 수 있게 띄워준다.복잡하고 어려운 커스텀 훅에 유용하다.useContextProvider 가 없을경우 처..

https://react.dev/reference/rsc/server-components Server Components – ReactThe library for web and native user interfacesreact.dev몰려오는 비즈니스 과제.. 반성하며 시작서버 컴포넌트의 '서버'는 SSR 서버와는 다름. 번들링 전 클라이언트앱이나 SSR 서버와는 분리된 환경(-> 이게 '서버')에서 미리 렌더링되는 컴포넌트1. 서버없이 사용하기일반적인 패턴: 사용하는 라이브러리는 번들에 포함됨 -> useEffect 내부에서 api 호출 -> 첫 렌더링 이후 api응답을 기다린 후 렌더링서버 컴포넌트 사용: 사용하는 라이브러리가 번들에 포함되지 않음 -> 앱이 빌드될 때 api 응답을 로드한 후 렌더링(..

useActionState https://react.dev/reference/react/useActionStateform 상태 관리에 사용?(action, initialState, permalink?) => [state, formAction, isPending]더보기permalink특정 웹페이지에 영구적으로 할당된 URL 주소e.g. nan-noo.tistory.com/스파르타문서읽기-4-useActionState- 리액트 form의 action 프롭이나, button의 formAction 프롭에 액션을 전달해서 사용(항상 POST로 동작)- 초기 상태 초기값이 쓰이고, 그 후부터 액션의 반환값이 현재 상태가 된다.폼 사용할 때 유용할 것 같다. RHF 등등처럼 기능을 다양하게 제공하지는 않지만 커스텀 ..

memo- memo(SomeComponent, arePropsEqual?) -> 새 컴포넌트를 반환한다.  - arePropsEqual 을 구현할 때는 함수를 포함하여 모든 Prop를 비교해야 합니다. 안그러면 업데이트가 잘 안될 수 있다. & 너무 깊은 비교는 하지 말자.- 메모이제이션 된 컴포넌트는 부모 컴포넌트가 리렌더링되어도 props가 변하지 않는다면(Object.is 비교) 리렌더링되지 않는다.-> 물론, 메모이제이션 된 컴포넌트 내부 상태나, 컨텍스트로 참조하는 상태가 바뀐다면 리렌더링된다.- 리액트 컴포넌트는 순수함수로 다뤄지기 때문에, 프롭이 같다면 같은 아웃풋을 반환한다.- 목록과 아이템 컴포넌트: 목록 컴포넌트가 리렌더링이 자주 발생한다면(인터렉션이 많다면) 아이템 컴포넌트를 memo..

useSyncExternalStore- 외부 스토어를 구독할수 있다. subscribe, getSnapshot, getServerSnapshot을 인자로 받음. 반환값은 스토어의 현재 스냅샷- subscribe: 스토어를 구독 / 구독취소 함수를 반환 - 스토어가 바뀌면 callback 인자를 호출 -> getSnapshot호출- getSnapshot: 스토어에서 데이터의 스냅샷(현재값 읽기) 가져옴 -> 스토어가 변경돼서 반환값이 달라지면(Object.is) 컴포넌트 리렌더링- getServerSnapshot: 스토어 데이터 초기 스냅샷 반환, 서버렌더링 중 or 하이드레이션 중에만 사용됨 / 서버에서 렌더링할 때 필수subscribe함수의 참조값이 바뀌면 다시 스토어를 구독하므로 주의 / getSna..

useTransition https://ko.react.dev/reference/react/useTransition-  UI 일부를 백그라운드에서 렌더링할 수 있게 해줌 -> useDeferredValue의 함수 버전인가?- transition으로 진행되는 state 업데이트는 다른 state 업데이트에 의해 중단될 수 있다.- 한계: 트랜지션이 여러개일 경우 리액트는 일괄 처리함 -> 나중에 수정될 것-> 요걸 더 편하게 감싼게 useActionState - 요청 순서를 자동으로 처리- 오 탭전환 같은거 할 때 로딩 긴 탭이 있어도 백그라운드에서 렌더링되니까 탭 전환 블락되는 걸 방지할 수 있음!-> 그래서 리액트에서도 페이지 탐색 등 라우터를 구축하는 경우 쓰라고  useDeferredValue ht..

https://react.dev/reference/react React Reference Overview – ReactThe library for web and native user interfacesreact.dev오랜만에 문서읽기 시작 리액트 - 훅, 컴포넌트, 기타 API들, 그리고 directives(서버 컴포넌트 구분용)리액트 돔 - 웹앱을 위한 기능을 담음(DOM에서 사용가능한 것들!) / client, server용 API가 나눠져 있음리액트 규칙: 순수성 유지, 리액트가 컴포넌트와 훅을 호출하도록 해라, 훅 규칙레거시 API들 -> Children, forwardRef 등 개발할 때 많이 썼던 API들 대거 등장..!---목차를 보니, 아는 것들(써본 것들)과 모르는 것들이 섞여 있음. 아..