본문 바로가기

JavaScript/React

 (10)
React.FC를 사용하지 말아야 하는 이유 이 글은 아래 링크의 글을 번역해서 작성했습니다. https://medium.com/raccoons-group/why-you-probably-shouldnt-use-react-fc-to-type-your-react-components-37ca1243dd13 ---- 이 글은 미세한 차이가 있지만, 읽어보면 React.FC를 사용하는 것에 대한 의견이 바뀔 수도 있을 겁니다. 이 글은 개인적인 의견임을 알아주세요. 만약 React.FC를 사용하는 것을 좋아하고 잘 동작한다면, 계속 사용하세요! 😄 하지만, 더 보기를 원한다면 계속 읽어주세요. 함수 컴포넌트 수많은 코드베이스에서, 이것과 비슷한 컴포넌트를 찾을 수 있을 겁니다. const MyComponent: React.FC = ({ message, })..
React - useMemo vs. useCallback 이 글은 아래 포스트를 보고 작성했습니다. https://www.daleseo.com/react-hooks-use-memo/ https://www.daleseo.com/react-hooks-use-callback/ ---- React 16.8 버전에 새로 추가된 Hook인 useMemo와 useCallback에 대해 알아보려 합니다. 1. useMemo Memoization된 값을 반환하는 Hook입니다. 즉, Re-Render가 발생했을 때 다시 계산할 필요가 없도록 값을 캐싱하는 것으로 생각할 수 있습니다. Memoization? 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거해 실행 속도를 개선하는 기법 아래와 같이 입력받은 str..
React - 배포하기 리액트에는 기본적으로 개발에 유용한 경고가 많이 포함되어 있습니다. 하지만, 그 경고는 리액트를 더 크고 느리게 만들기 때문에 앱을 배포할 때에는 프로덕션 버전을 사용해야 합니다. 빌드 프로세스가 올바르게 설정되었는지 잘 모르는 경우엔, 크롬의 확장 프로그램인 React Developer Tools를 사용하여 확인할 수 있습니다. 목차 SPA 프로젝트 빌드 serve 패키지로 배포하기 AWS S3에 배포하기 NginX로 배포하기 Node.js의 Express로 배포하기 1. SPA 프로젝트 빌드 프로젝트 생성 npx create-react-app react-deploy-test cd react-deploy-test npm run build npm run build : 리액트 애플리케이션을 producti..
React - Hooks, Context React Hook이 나오기 전에는 state와 Life Cycle을 사용하기 위해서 컴포넌트를 Class로 만들어야 했습니다. 하지만, Class로 컴포넌트를 만들다 보니 로직이 복잡해지고, 가독성이 떨어져서 컴포넌트를 재사용하기가 어려웠습니다. 추후에 함수 컴포넌트에서도 state와 Life Cycle을 사용할 수 있는 Hook이 출시됐고, 컴포넌트의 로직과 가독성이 향상되어 재사용하기가 수월해졌습니다. ---- 1. Hooks React 16.8 버전에 새로 추가된 기능이며, 클래스 컴포넌트에서만 state와 Life Cycle을 사용할 수 있던 걸, 함수 컴포넌트에서도 사용할 수 있게 해줍니다. 단순히 state와 Life Cycle을 사용할 수 있다는 점을 넘어서, 컴포넌트의 state와 관련된..
React - ControlledComponent, UnControlledComponent 1. 왜 Controlled, UnControlled를 알아야 할까? React는 컴포넌트가 상태(state)를 가지게 해서 각 컴포넌트가 독립적으로 동작하도록, 단일 소스로 관리하려는 설계 원칙을 가지고 있습니다. 또한, props를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 단방향 흐름을 지향합니다. 위와 같은 원칙들은 와 같이 데이터를 가지지 않는 엘리먼트를 사용할 땐 문제가 되지 않습니다. 하지만, . , 와 같이 자체적으로 value를 가지는 엘리먼트에 접근하려면 document.querySelector를 사용하게 되고, 위의 원칙들을 위배하게 됩니다. https://soldonii.tistory.com/145 React의 설계 원칙에 맞게 접근하기 위해 사용되는 방법으로 Cont..
React - Component Styling 이 글에선, 컴포넌트를 스타일링 하는 방법에 대해 알아봅니다. 1. Style Loaders create-react-app은 webpack 기반으로 동작하고, style-loader와 css-loader가 기본으로 설치/설정되어 있습니다. 따라서, css-loader를 사용해 JS 파일에서 CSS 파일을 로드할 수 있고, style-loader를 사용해 CSS 빌드 결과물을 ) } 5. Ant Design UI/UX를 쉽게 구현할 수 있게 해주는 프론트엔드 프레임워크입니다. Ant Design 설치 $ npm i antd Ant Design 사용 import "antd/dist/antd.css"; import { Calendar } from 'antd'; function App() { return ( ...
React - React Router DOM 이 글은 react-router-dom 6 버전을 기준으로 작성되었습니다. 1. React Router? React를 위한 클라이언트 측 라우팅 라이브러리입니다. URL이 바뀌면 페이지를 새로고침하지 않고, 필요한 부분만 로드합니다. React는 기본적으로 UI 구축에만 초점을 맞추기 때문에, 라우팅을 위한 내장 프로그램이 없습니다. create-react-app 구성에 기본적으로 포함되어 있지 않기 때문에, 별도로 설치해야 합니다. https://reactrouter.com/docs/en/v6/getting-started/concepts#main-concepts React Router vs. React Router DOM react-router는 핵심 컴포넌트와 기능을 export 합니다. react-..
JSX - 기본 개념과 문법 정리 1. JSX? const element = Hello, world!; 위의 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며, JavaScript를 확장한 문법으로 React에서 Element를 생성하기 위해 사용됩니다. https://ko.reactjs.org/docs/introducing-jsx.html 아래의 예처럼, 자식 요소가 있는 HTML을 JSX 없이 React Element로 생성해보겠습니다. hello hi ReactDOM.render( React.createElement('div', null, React.createElement('h1', null, 'hello'), React.createElement('ul', null, React.createElement('li', ..

티스토리툴바