[React] You might not need an effect를 읽고 프로젝트 effect 수정하기

챌린지반에서 지원해 진행하게된 발표 자료다. 다른 아티클도 있었지만 이 내용을 선택한 이유는 지난번에 시간에 쫓겨 제대로 알아보지 못한 useEffect를 제대로 알아보고싶다는 생각이 들어서였다. 단순히 아티클 내용을 설명하는 것이 아니라, 공부하면서 막혔던 부분을 어떻게 해소했는지 / 그리고 이전에 진행한 메달 트래커 과제에서 사용한 useEffect들을 다시 살펴보고 수정하는 내용을 발표했다. 목차1. 아티클 내용 중 이해가 어려웠던 부분과 해결 방법2. 메달 트래커 과제에서 사용한 useEffect 돌아보기 useEffect컴포넌트가 렌더링된 후 실행할 동작을 설정할 수 있는 Hook의존성 배열을 이용해 특정 값이 변경됐을 때만 동작을 실행하도록 설정할 수 있음! Effect가 필요없는 일반적인 경..

• format_list_bulleted 챌린지반
• · 2024. 8. 20.
• textsms

[React] react-router-dom

패키지 설치yarn add react-router-dom 사용 순서페이지 컴포넌트 생성pages 폴더 내에 .jsx 파일들 생성해줌Home.jsxAbout.jsxWorks.jsxContact.jsxscr > shared 폴더에 Router.jsx 파일 생성const { BrowserRouter } = require("react-router-dom");const Router = () => { return ;};export default Router;BrowserRouter > Routes > 여러 Route들 의 계층구조로 만든다- 이 Route 들을 이동할 수 있는 SPA를 만드는 것!  Route는 두개의 props를 받는다path: 프로젝트에서 사용할 경로element: 표시할 컴포넌트import ..

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

[React] CRA, Vite 없이 개발환경 구축하기

프로젝트 초기 설정1. 프로젝트 폴더 생성 2. HTML 파일 생성  3. React와 ReactDOM CDN 추가  Babel 적용해 JSX 사용하기위의 문법에서 오류가 발생하는 이유는 아직 현재 프로젝트에서 JSX 문법을 모르기 때문이다. 트랜스파일러프로그래밍 언어의 코드를 다른 프로그래밍 언어 또는 동일한 언어 내에서 다른 버전이나 형식으로 변환하는 도구JSX 등의 최신 확장 문법의 JS들을 구버전 JS로 변경 1. Babel 설치 2. scrpit tag 수정- type="text/babel"설정 추가해 babel이 어떤 스크립트를 트랜스파일 할지 지정 3. 패키지 초기화npm init -ynpm install --save-dev @babel/core @babel/cli @..

• format_list_bulleted 챌린지반
• · 2024. 8. 19.
• textsms

[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