[React] Effect가 필요하지 않을 수도 있습니다

아래 두 자료를 공부하고 정리한 내용입니다!You Might Not Need an Effect Effect가 필요하지 않을 수도 있습니다 – ReactThe library for web and native user interfacesko.react.dev Goodbye, useEffect - David Khourshid  useEffect 사용의 문제점1) 코드의 맥락을 따라가기 어려움2) 실행 속도가 불필요하게 느려질 수 있음3) 에러 발생 가능성 증가 (복잡한 의존성 배열 등)4) Strict 모드에서 이중으로 실행되는 문제  useEffect의 대안1) 이벤트 핸들러 사용- 폼 제출과 같은 간단한 이벤트는 이벤트 핸들러 내에서 직접 처리 2) 외부 라이브러리 사용- 데이터 패칭 및 상태 관리를 위해..

• format_list_bulleted React
• · 2024. 8. 18.
• textsms

[React] useSyncExternalStore

리액트에서 외부 저장소를 구독하기 위한 훅이다!useEffect에대한 발표를 준비하며 나왔는데 Effect 대신 권장하는 방법으로 이 훅을 알려줬는데.. 예제가 이해되지 않아 찾아보았다. useSyncExternalStore 란?리액트에서 외부 데이터 저장소를 구독하고, 컴포넌트에 저장소의 값을 읽어올 수 있도록 하는 훅외부 데이터가 변경되면 컴포넌트를 리렌더링하여 변경사항을 반영할 수 있음  사용법기본 구조const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?); 인자1) subscribe: 외부 저장소에 구독하기 위해 필요한 동작을 담을 함수, 구독을 정리하는 함수를 반환해야 함2) getSnapshot: 저장소..

• format_list_bulleted React
• · 2024. 8. 18.
• textsms

[React] memoization

리렌더링의 발생 조건1) 컴포넌트에서 state가 바뀌었을 때2) 컴포넌트가 내려받은 props가 변경됐을 때3) 부모 컴포넌트가 리렌더링된 경우 모든 자식 컴포넌트도 리렌더링  잦은 리렌더링이 좋지 않은 이유1) UX 관점에서 계속해서 바뀌는 화면을 보는 것은 사용자에게 좋지 않음2) 비용이 발생하는 작업을 줄여 최적화해야 함- memo: 컴포넌트를 캐싱- useCallback: 함수를 캐싱- useMemo: 값을 캐싱  React.memomemo부모 컴포넌트가 리렌더링되면 자식 컴포넌트는 모두 리렌더링 됨변화가 없는 자식 컴포넌트는 리렌더링되지 않게 하기 위해서 memo를 사용할 수 있음 예제function App() { const [count, setCount] = useState(0); con..

• format_list_bulleted React
• · 2024. 8. 17.
• textsms

[React] useContext

React Context의 필요성prop drilling이 깊게 일어날수록 문제가 일어난 부분을 찾기 어렵고, 어떤 에러가 생길지 파악하기 어렵다!따라서 hook을 통해 쉽게 전역 데이터를 관리하기 위해 사용한다 context API 필수 개념1) createContext: context를 생성2) useContext: context를 구독, 해당 context의 현재 값을 읽음3) Provider: context를 하위 컴포넌트에 전달  사용 예제✔︎ Grandfather 컴포넌트에서 Father 컴포넌트를 거치지 않고 Child 컴포넌트로 houseName, pocketMoney를 전달하고 싶음 1) context 폴더와 사용할 context.js 생성, createContext + 공유할 값을 내려..

• format_list_bulleted React
• · 2024. 8. 16.
• textsms

[React] useRef

언제 사용할까?특정 값을 저장하기 위해 사용Ref가 변경된다고해서 리렌더링이 일어나지 않는다. (state와 차이) 사용법1) useRef import 2) useRef 사용해 초기값 지정function App() { const ref = useRef("초기값"); console.log("ref: ", ref);}current라는 key에 값이 저장돼있는 것을 확인할 수 있다! 3) 값 변경하기function App() { const ref = useRef("초기값"); console.log("ref: ", ref); ref.current = "바꾼 값"; console.log("ref: ", ref);}ref의 current에 접근해 값을 바꿔준다   사용 예제✔︎ 아이디, 비밀번호 inpu..

• format_list_bulleted React
• · 2024. 8. 16.
• textsms

[React] useState

함수형 업데이트state의 값을 업데이트하기 위해 setState에 직접 수정할 값을 전달해줄 수도 있지만, 함수의 반환값을 이용할 수도 있다!const [count, setCount] = useState(0);const handleCountPlus = () => { setCount((현재값) => { return 현재값 + 1; });}; 값을 대입하는 방식과의 차이const [count, setCount] = useState(0); { // 값을 대입하는 경우 setCount(count + 1); setCount(count + 1); setCount(count + 1); // 함수를 사용하는 경우 setCount(prev => prev + 1); setCount(prev =>..

• format_list_bulleted React
• · 2024. 8. 16.
• textsms