'📃 Front-End' 카테고리의 글 목록 (8 Page)

React - Router 기본

2022.10.24

✔ CSR 라이브러리 설치 https://reactrouter.com/ 접속 Read the Docs 클릭 VScode 터미널에서 명령어 입력하고 설치 설치가 정상적으로 됬는지 확인하기 위해 package.json 파일에서 확인하기 npm start 로 프로젝트 시작 ✔ 프로젝트에서 직접 Page Routing 시도하기 현재 폴더 구조 ✔ 브라우저 URL 과 React App 을 연결 App.js import './App.css'; import { BrowserRouter } from 'react-router-dom'; // 브라우저 URL 과 React App 을 연결 하는 기능 function App() { return ( // 최상위 태그로 감싸기 App.js ); } export default A..

📃 Front-End/React.js

React SPA & CSR

2022.10.24

Routing ❓ 경로를 정해주는 행위 그 자체 ✔ 브라우저와 웹 서버 인터넷을 사용해서 웹 사이트에 접속 한다는 것은 브라우저를 통해서 웹 서버에게 경로의 요청을 전달하고, 웹 문서를 받아보는 위와 같은 과정 입니다. /home 이라는 경로를 요청을 보내게 되면, /home 에 해당하는 웹 문서인 Home.html 을 웹 서버가 브라우저에게 전달하게 됩니다. ✔ Page Routing 어떠한 요청에 따라서 어떤 페이지를 돌려줄지 결정하는 과정을 일컫는 말 입니다. 현재 REQUEST 가 /home 이라는 경로로 요청이 들어왔습니다. 웹 서버는 경로에 알맞는 페이지인 Home.html 를 선별을 해서 돌려주게 됩니다. 이렇게 요청에 명시되어 있는 경로에 따라서 알맞은 페이지를 선택하게 하는 과정 자체를 ..

📃 Front-End/React.js

Context API

2022.10.24

컴포넌트 트리에 데이터 공급 ✔ 계층 구조 위의 사진은 현재 만들어본 프로젝트의 계층 구조 는 3 개의 props 을 받지만, 그 중에 빨간색으로 두 개는 자신이 사용하지 않는 props 입니다. 전달만 하는 컴포넌트가 중간에 많이 생기게 되는 경우에는 props 의 이름도 바꾸기가 어려워지고, 코드 작성과 수정에 악영향을 미치게 됩니다. 이러한 상황을 마치 props 가 드릴처럼 땅을 파고 들어간다고 props 드릴링 이라고 부릅니다. 부모에게서 자식으로만 데이터를 전달하는 단방향 데이터 흐름을 지키는 React 의 문제라고도 생각 할 수 있습니다. ✔ Context 의 개념 모든 데이터를 가지고 있는 컴포넌트가 Provider 라고 공급자 역할을 하는 자식 컴포넌트에게 자신이 가지고 있는 모든 데이터..

📃 Front-End/React.js

useReducer

2022.10.24

컴포넌트에서 상태변화 로직을 분리 필요성 ❓ useState 를 이용하면 위의 처럼 상태 변화 함수를 각각 Counter 컴포넌트 안에 작성을 해야 했습니다. 이와 같은 경우 컴포넌트의 코드가 길어지고 복잡 할 수 밖에 없습니다. useReducer 을 사용하면 ❓ 왼쪽에 보이는 reducer 라는 상태 변화 함수를 컴포넌트 밖으로 분리를 하여 다양한 상태변화 로직을 컴포넌트 외부로 분리를 해서 쉽게 처리 할 수 있게 바꿀 수 있습니다. useReducer 는 useState 를 대체 할 수 있는 기능 입니다. ✔ 동작 - 1 const Counter = () => { const [count, dispatch] = useReducer(reducer, 1); //const [ state, 상태를 변화시키는..

📃 Front-End/React.js

최적화 - useCallback

2022.10.24

문제점 ❓ 전에 만든 일기 프로젝트에서 일기를 삭제하면 일기를 생성하는 Editor 가 렌더링이 됩니다. 테두리를 잘보면 깜빡 입니다. 일기를 삭제 하는 과정에서 일기 Editor 가 렌더링이 될 이유는 전혀 없습니다. 그러므로 Editor 를 최적화 하겠습니다. 컴포넌트가 렌더링이 일어나는 조건은 본인이 가지고 있는 state 의 변화가 생기거나, 부모 컴포넌트가 리렌더링이 일어나거나, 자신이 받은 prop 이 변경되게 되는 경우 리렌더링이 일어납니다. ✔ DiaryEditor.js const DiaryEditor = ({ onCreate }) => { export default React.memo(DiaryEditor); // React.memo 사용 현재 DiaryEditor 는 onCreate 하..

📃 Front-End/React.js

최적화 - React.memo

2022.10.24

컴포넌트 재사용 함수형 컴포넌트에게 업데이트 조건을 걸기 ✔ 컴포넌트 트리 App 컴포넌트는 각각 count 와 text 두 개의 state 를 가집니다. counst state 는 CountView 에게 , text state 는 TextView 컴포넌트 에게 prop 으로 각각 보내주고 있습니다. 우측에 표시된 순서대로 코드를 수행하면서 어떻게 업데이트 되는지 보겠습니다. ✔ 순서 setCount(10) 이 실행이 되면서 App 컴포넌트의 count state 의 값을 변화 시킬 예정입니다. 그러면 App 컴포넌트의 count state 의 값이 바뀌게 되고, state 가 업데이트 되었기 때문에 해당 state 를 가진 App 컴포넌트는 리렌더링이 되게 됩니다. 그렇게되면 prop 인 CountVi..

📃 Front-End/React.js

최적화 - useMemo

2022.10.24

연산 결과 재사용 하는 방법 ✔ 정의 이미 계산 해 본 연산 결과를 기억 하고 있다가, 똑같은 계산을 시키면 다시 계산하지 않고 답만 반환하는 방법 Ex) 수학 시험을 볼 때, 이미 풀어본 문제는 다시 풀어보지 않아도 정답을 알고 있는 것 emotion 별 일기의 개수와 비율 ✔ App.js const getDiaryAnalysis = () => { console.log('일기 분석 시작') const goodCount = data.filter((it)=>it.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return {goodCount, badC..

📃 Front-End/React.js

React developer tools

2022.10.24

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko Chrome 의 확장 도구 React 개발 시 편의성을 줍니다. ✔ React app 을 개발 하고 있으면 위의 모양 처럼 바뀝니다. ✔ 참고하면 좋은 사이트 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=pjt3591oo&logNo=221907792621

티스토리툴바