본문 바로가기

프로그래밍 공부내용/리액트(React)

 (13)
Normalizing State Shape(상태를 이쁘게 관리하는 법) - 리덕스 공식문서 읽기 Before Reading 실무에서 어플리케이션들은 복잡하게 얽히고 연결된 데이터를 다뤄야 합니다. 예를 들면, 블로그 에디터(ex 티스토리)는 많은 포스트를 가지고, 각각의 포스트는 여러 코멘트를 가지고, 포스트와 코멘트는 또 누가 썼는지를 알아야하고.... 복잡합니다. 이런 어플리케이션의 데이터는 아래와 같은 모양일 것입니다. const blogPosts = [ { id: 'post1', author: { username: 'user1', name: 'User 1' }, body: '......', comments: [ { id: 'comment1', author: { username: 'user2', name: 'User 2' }, comment: '.....' }, { id: 'comment2',..
Batching에 관하여(리액트 setState 비동기 묶지 않고 따로따로 처리 하기) 리액트를 처음 배울때 당황했던 부분이 있다. 간단한 계산기를 만드는 미션이었는데, setCount를 하는데 잘 동작하지 않았다. 아래 예시코드를 보아라 ## batching이란? export default function App() { const [count, setCount] = useState(0); const onClick = () => { setCount((prev) => prev + 1); setCount((prev) => prev + 1); setCount((prev) => prev + 1); }; return ( {count} 올리기 버튼 ); } 이런식으로 작성했더니, count 가 1씩 증가하지 않고 한번에 3씩 증가했다. 내가 보고 싶었던건 1,2,3 이 다르륵 하고 올라가는 거였는데 ..
1. Introduction - MSW (Mocking Service Worker) 공식문서 따라 읽기 및 사용설명 한글화 문서들이 많이 없는 것 같아서.. 공부하는 겸 한글화를 동시에 진행하도록 하겠습니다. 공식문서 자체 내용은 기본 폰트로, 제가 추가한 내용은 노란폰트로 작성하도록 하겠습니다. 원본은 여기있습니당 https://mswjs.io/docs/ Introduction What is Mock Service Worker? mswjs.io 소개 msw는 실제 request를 가로채기위해서 service worker를 사용하는 api mocking 라이브러리입니다. mock이란 '가짜의' 란 뜻입니다. api를 실제로 작동시키지 않고도 가짜값을 사용할 수 있게 하는 것을 말함. Service Worker Api란 응용프로그램, 브라우저, 네트워크 사이의 프록시 서버 역할을 하는 api.를 말함. 탐색과 리소스 요..
useRoutes() 훅 import { useRoutes } from 'react-router-dom'; const App = () => { const routes = useRoutes([ { path: '/', element: }, { path: '/clock', element: }, { path: '/stopwatch', element: }, { path: '/alarm', element: }, ]); return ( {routes} ); }; 와 같은 식으로 사용할 수 있다. path설정같은거 할때 쉽게 정리 가능해서 나름 유용한 것 같다. v6.0 이전에는 react-router-config 였다고 한다. 일반적 Routes와 쓰이는것도 똑같고 무엇을 쓸지는 취향차이라고 합니다.. React Router says, "H..
라우터 기본 사용법과 link와 navLink의 차이 리액트 v6.0이 되면서 navLink가 조금 바뀐 것 같다. 리액트 라우터 사용법 설치 npm install react-router-dom 라우터적용 //index.js import {BrowserRouter} from 'react-router-dom' ReactDOM.render( , document.getElementById('root') ); HTML5의 history API를 제공하는 Router 이다. 속성(props)으로 줄 수 있는 것은 다음과 같다. - basename: base URL을 설정해줄 수 있다. // renders // renders ... 리액트로 배포를 하게 될때 package.json에 "homepage": "http://kangyunho.com/github-io", 처..
리액트와 순수함수 리액트 공식문서를 보면 "모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다." 라는 말이 나온다. (https://ko.reactjs.org/docs/components-and-props.html) 무지성으로 혹은 관습적으로 본능에 맞긴 채 컴포넌트 분리를 하고 왔던 터라, 순수함수가 궁금해졌다. 찾아보니 다들 비슷한 정의이긴 했는데... 믿을만한 소스가 없어서 위키에서 검색해봤다. 1. 함수에 같은 값을 주면 항상 같은 값을 줘야한다. 2. 외부의 상태를 변경하지 않는다. - 그냥 보면 이해가 안 갈 것이기 때문에 예시를 들고 왔다. fucntion add(a, b){ return a+b; } add(3,5) //8 많이들 보여주는 예시이다. 외부 값이 변하지..
Create portal - 간단 요약 모달창같은 경우 리액트에서 제공하는 Create Portal을 이용하면 좋다는 피드백이 있어서 찾아보았다. 사용방법은 매우 쉬웠는데 return 해줄 컴포넌트를 ReactDOM.createPortal() 함수로 감싸주기고 2번째 인자로 document.body 를 넣어주면 된다. ------------------------------------- - DETAILS 리액트 v16에서 도입 됐는데, 사실 그냥 구현해도 되는걸 좀 편리하게 빼놓은 것에 불과하다. 공식문서상 설명은 이렇다. ReactDOM.createPortal(child, container 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식입니다. 두 번째..
절대경로로 import 하기 1. js를 이용해서 Importing a Component | Create React App This project setup supports ES6 modules thanks to webpack. create-react-app.dev 원문이다 jsconfig나 tsconfig 파일에 아래와 같은걸 추가하면 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } baseUrl이 './src' 파일로 설정되고 src/components/Button.js에 잇는 Button을 import 한다고 했을 시 import Button from 'components/Button'; 처럼 좀 더 간단하게 import 할 수 있다. 1. Ts를 이용해서 TS..

티스토리툴바