FE/react13 [React] 부수 효과 (Side Effect) 03.10.2024 1. 리액트에서 부수 효과란 영어에서 Side Effect의 정의는 부작용에 가깝다. 본래 원했던 효과가 아닌 다른 효과가 부수적으로 딸려온다는 의미이다. 그러나 리액트에서 Side Effect란 그저 부수적인 효과를 의미한다. "부수적인 효과라니, 그건 에러 아닌가요?" 아니다. 다시 정리하자면 에러와 같이 내가 짠 코드가 원하는 대로 동작하지 않는 게 아니고, 코더가 함수 등에 본래 메인 역할 외에 다른 효과를 넣는 것이다. 코드 예시를 보면 이해가 좀 더 빨라질 것 같다. // Ex 1 const increment = (num) => { console.log("input", num);// Side Effect return num + 1; } increment(1); // Ex 2.. 2024. 3. 10. [React] 일방향 흐름 (One-Way Data Flow) 03.01.2024 0. Background 리액트에서의 데이터 흐름은 단방향이고, 단방향이어야 한다. 즉, 부모 컴포넌트로부터 자식 컴포넌트로 전달된다. 이것을 우리는 일방향 흐름 또는 단방향 흐름(One-Way Data Flow)라고 한다. 1. Reactivity Reactivity, 한국말로 반응. 이것은 무엇을 뜻할까? 감히 정의를 해보자면 Reactivity: 애플리케이션의 내부적인 상태를 실제 UI에 반영하는 규칙 이라고 할 수 있다. 이 Reactivity, 반응이라는 개념에서는 알아두어야 할 핵심 두 가지가 있다. 흐름(Flow): 물이 고이면 안된다 일방통행(One-Way): 물이 역류해서는 안된다. 2. 대표적인 안티패턴 2-1. 건전하지 않은 의존성 배열 우리는 먼저 의존성 배열(D.. 2024. 3. 1. [React] 선언적 프로그래밍(Declarative Programming) 02.29.2024 0. Background 콜로소 라는 업체에서 하는 온라인 무료 특강을 듣고 배운 내용들을 잘라서 정리하려 한다. 토스 프론트엔드 개발자분이 선언적 프로그래밍, 단방향 흐름, 부수 효과 총 세가지에 대해 강연하셨다. 오늘은 이 중 선언적 프로그래밍에 대한 글을 정리해 보려고 한다. 1. 선언적이란? 1-1. 논란의 여지를 주는 키워드 우리 프로그래밍 세계에서는 논란의 여지가 있는 질문들이 있다. HTML은 프로그래밍 언어인가? -> 프로그래밍 언어의 정의는? 강타입 언어를 써야하는가? -> 강타입이란? 개발을 잘 하려면 수학을 배워야 하는가? -> 개발을 잘한다라는 의미는? 이와 같이 선언적이라는 말도 엄밀하게 정의되는 개념이 없다. 당장 위키피디아를 찾아봐도 그렇다. 그렇다면 우리가.. 2024. 2. 29. [React] SEO 문제의 배경과 극복하는 방법 08.05.2023 0. Background 이 글은 한 유튜브 동영상에서 영감을 받아 작성된 글입니다. 프론트엔드 개발자 지망 학생으로서 좋은 인사이트를 얻을 수 있는 동영상인데 조금 길어서 나누어 읽거나 다른 것을 하면서 편안하게 듣는 것을 추천드립니다. https://youtu.be/w6TiQJ9SlY4 1. SEO에 대한 개요 1-1. SEO 이전의 웹개발 역사 모두 아시다시피 웹개발의 초창기에는 프론트고 백엔드고 구분없이 웹개발을 했었습니다. 그 당시에는 웹이 그렇게 복잡하지 않았으니까요. 그러나 웹과 인터넷이 진화하면서 점점 사람들이 기대하는 기능과 기술들이 많아지고, 코드량도 계속 쌓이게 됩니다. 자세하게 말하자면 확장성, 자원최적화 등등이 있겠지만, 결국 한마디로 웹서비스 규모가 커진 것이.. 2023. 8. 5. [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. 이전 1 2 3 다음
