react.js9 [React] 선언적 프로그래밍(Declarative Programming) 02.29.2024 0. Background 콜로소 라는 업체에서 하는 온라인 무료 특강을 듣고 배운 내용들을 잘라서 정리하려 한다. 토스 프론트엔드 개발자분이 선언적 프로그래밍, 단방향 흐름, 부수 효과 총 세가지에 대해 강연하셨다. 오늘은 이 중 선언적 프로그래밍에 대한 글을 정리해 보려고 한다. 1. 선언적이란? 1-1. 논란의 여지를 주는 키워드 우리 프로그래밍 세계에서는 논란의 여지가 있는 질문들이 있다. HTML은 프로그래밍 언어인가? -> 프로그래밍 언어의 정의는? 강타입 언어를 써야하는가? -> 강타입이란? 개발을 잘 하려면 수학을 배워야 하는가? -> 개발을 잘한다라는 의미는? 이와 같이 선언적이라는 말도 엄밀하게 정의되는 개념이 없다. 당장 위키피디아를 찾아봐도 그렇다. 그렇다면 우리가.. 2024. 2. 29. [문제 해결] 리액트에서 최신 상태 보장 방법 09.23.2023 1. 문제 발생 React DnD를 이용해서 드래그 앤 드랍 기능을 이용하던 도중 알 수 없는 문제를 마주쳐 거의 하루를 고민했던 것 같다. Page.tsx import { useState } from 'react'; import DragTargetLine from '/my/path'; interface Activity { id: number; planId: number; } const testData: Activity = { id: 1, planId: 1, }; function Plan(): JSX.Element { const [activities, setActivities]: (Activity : object)[] = Array.from({ length: 24 }, () => ({.. 2023. 9. 24. [React] React Router - Link 동적 패스 지정 07.23.2023 1. 기본 Link 사용법 App.tsx에 먼저 패스 등록을 해줘야 한다. import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Main from 'pages/Main'; function App(): JSX.Element { return ( ); } export default App; 이 다음 해당 컴포넌트에서 이와 같은 코드를 써주면 된다. import { Link } from 'react-router-dom'; function Example(): JSX.Element { return ( Main ); } export default Example; 2. 컴포넌트에 Link 적용하기 Link는 a태그로 렌더링된.. 2023. 7. 23. React와 TypeScript 초기세팅 07.19.2023 0. Background React.js를 쓸 때 TypeScript가 이제는 거의 디폴트가 되었다. 그래서 두 개를 같이 쓸 때 필요한 초기세팅 프로세스를 간단하게 적어보았다. 1. create-react-app을 사용한다면 (If using create-react-app) 간단하게 create-react-app 명령어로 시작할 수 있다. $npx create-react-app "your target directory" -template typescript 2. react-react-app을 사용하지 않는다면 (If not using create-react-app) $npm i -g typescript 이 명령어의 경우, 로컬에서 다른프로젝트를 이용하여 이미 글로벌로 타입스크립트를 .. 2023. 7. 19. 메모이제이션이란?(useMemo, useCallback) in React.js 06.26.2023 1. 메모이제이션의 정의 같은 함수가 같은 값을 계속 리턴해야할 때, 첫 번째 값을 메모리에 저장해놓고 메모리에서 값을 불러와 재사용하는 메모리 사용 기법. 2. 활용도 2-1. useMemo 예를 들어 이러한 함수형 컴포넌트가 있다고 하자. function Component () { const result = calculate(); return {result} } function calculate () { // 무거운 작업을 하는 코드 return 10; } 이 컴포넌트가 렌더링이 될 때마다 calculate은 무거운 작업을 계속해야 할 것이다. 그러나 result는 항상 10일 때, 성능이 비효율적이 될 것. 이럴 때 메모이제이션을 사용하여 해결 가능 function Compone.. 2023. 6. 26. 4. Using Variables in useEffect (useEffect에서 변수 쓰기) 03.16.2023 0. Background What I wanted to do was to use the prop as name for components and fetching data from database when props was passed in the result page from the main page. Here is what I did. 1. Store the prop as name using useState function Result(props){ const [name, setName] = useState(null); // Set name using useEffect useEffect(()=>{ if(location.state === null) setName(props.name);.. 2023. 3. 16. 이전 1 2 다음
