728x90 React3 제대로 알고 사용하자 useCallback, useMemo 그리고 React.memo 보통 공부를 하다보면 많이 접하는 useCallback과 useMemo는 많이들 이렇게 알고있다. useCallback : 메모이제이션된 함수를 반환 useMemo : 메모이제이션된 값를 반환 설명만 보면 리랜더링 될때 함수 또는 값을 재생성하지 않고 메모이제이션된 값을 사용하는 GOAT hook이다. 여기서 리랜더링이라하면 props가 변경되었을 때 state가 변경되었을 때 부모 컴포넌트가 렌더링되었을 때 forceUpdate() 를 실행하였을 때 의 조건으로 리액트는 리랜더링을 하고있다. 처음에 위의 hook을 보게된다면 이런생각을 할 수도 있다. 모든 함수나 값에 해당 hook을 사용해서 메모이제이션을 하면 최적화에 아주 도움이 되겠군!!! 이러한 생각을 했다면 다시한번 생각해보자. 메모이제이션을.. 2024. 3. 4. Reactjs code snippets을 사용해서 자동 템플릿을 설정해보자 유튜브를 보다가 한 유튜버가 fc를 입력했을뿐인데 컨포넌트 형식이 툭 떨어지는것을 보고 이거다 싶어서 검색을 해봤다. 검색해보다가 vscode 확장프로그램인 Reactjs code snippets를 많이 사용하는것을보고 바로 설치했다. 설치를 하였다고 내가 원하는 형식으로 바로 툭떨어지는 것이아니라 내가 하고싶은 형태에 따라 따로 커스텀을 해줘야했는데 vscode 에서 command + shift + p를 누르고 snippets을검색하면 위와같이 사용자 코드 조각 구성이라고 나온다 이걸 선택하면 종류별로 많이 나오게되는데 나는 컨포넌트를 만들고싶어서 typescriptreact.json 파일을 선택했다. 맨처음 선택하게된다면 이렇게 모두 주석처리가 되어있는것으로 보이게 되는데 여기서 템플릿 설정을 하면된.. 2023. 6. 11. [React] Context API란? 본글은 React 공식 홈페이지를 참조하였습니다. Context context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에에) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포ㅓㄴ트가 이러한 값을 공유하도록 할 수 있습니다. 언제 context를 써야 할까? context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공.. 2022. 1. 31. 이전 1 다음 728x90
