Redux 기초 알아보기 Redux란, Redux는 React 애플리케이션에서 전역 상태 관리를 위한 라이브러리이다. React의 props와 state를 통해 컴포넌트 간에 데이터를 주고 받는 것보다 Redux를 사용하면 데이터의 흐름이 명확하게 구조화된다. 유지보수와 디버깅을 쉽게 만들어줌 FLUX 패턴을 따르고 있다. FLUX 패턴은 React에서 상태 관리를 하기 위한 아키텍처 패턴 중 하나로, 단방향 데이터 흐름을 따른다. Redux 장점 전역 상태를 관리하므로 상태 업데이트가 효율적이다. 상태의 흐름이 명확하게 구조화되어 있어 유지보수와 디버깅이 쉽다. 개발자 도구를 통해 상태 변화를 쉽게 추적할 수 있다. 미들웨어를 통해 비동기 작업을 처리할 수 있다. Redux 단점 초기 설정과 학습 곡선..
Side Effect let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 Side Effect가 있는 함수라고 부른다. React 컴포넌트의 Side Effect 타이머 사용(setTimeout) 데이터 가져오기(fetch API, localStorage) React 애플리케이션을 작성할 때에 AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있다. 이는 React 입장에서 보면 전부 Side Effect로 볼 수 있다. Side Effect가 아닌 React의 ..
데이터 흐름 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다. 즉, 상향식으로 앱을 만든다. 이렇게 앱을 만들었을 때 가장 큰 장점은 테스트가 쉽고 확장성이 좋기 때문이다. 위의 사진을 트리 구조로 나타낸 컴포넌트라고 생각해보면, 컴포먼트는 컴포넌트 바깥에서 props를 이용해 데이터를 전달인자 혹은 속성 처럼 전달 받을 수 있다. 또한, 데이터를 전달하는 주체는 부모 컴포넌트된다. 따라서 데이터 흐름이 하향식을 의미하는 것을 알 수 있다. 모든 데이터를 상태로 둘 필요는 없기 때문에 상태는 최소화하는 것이 가장 좋다. 상태가 많아질 수록 애플리케이션은 복잡해지기 때문에 어떤 데이터를 상태로 두어야 하는지의 여부는, 아래 세가지 질문을 통해..
Props 알아보기 Props 란 ? 외부로부터 전달받은 값 / 부모 컴포넌트로부터 전달받은 값 / 변하지 않는 값 컴포넌트의 속성(property)을 의미 객체 형태 Props 사용법 const Parent = () => { const itemOne = "myossi는"; const itemTwo = "React를 배우고 있습니당"; return ( ); }; const Child = (props) => { return {props.text}; }; export default Parent; 간단 설명 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다. props를 이용하여 정의된 값과 속성을 전달한다. 전달받은 props를 렌더링한다. 풀어서 보자. 부모 컴포먼트에서 itemOne , i..
State 알아보기 State 란 ? 컴포넌트 내부에서 변할 수 있는 값 애플리케이션의 상태라고 할 수 있다. 쇼핑몰 장바구니를 예시로 들어보면, 장바구니내에서 체크 된 상태와 체크 되지 않은 상태로 상태를 구분할 수 있다. State hook, useState useState는 React에서 state를 다루는 방법 중 하나이다. useState 사용 1. 사용 할 파일내에서 react에서 useState를 import 해야 한다. import { useState } from "react"; 2. 컴포넌트 안에서 useState 호출 1. 수도 코드 const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); 2. 문법 예시 function CheckboxExampl..
Router를 알아보기 전에 SPA는 뭐였나요 ? SPA는 경로에 따라 다른 뷰를 보여줄 수 있습니다. SPA는 하나의 페이지만 가지고 있지만 한 종류의 화면만 사용하지 않습니다. 그래서 경로에 따라서 다른 뷰를 보여주는 라우팅의 과정이 필요합니다. 이 때 사용하는 것이 Router 입니다. SPA에 대해 자세히 알고 싶다면 클릭하세오 [ React 기초 ] React SPA 알아보기 React SPA를 본격적으로 알아보기 전에 , React SPA가 생긴 이유부터 알아봅시다. React SPA가 왜 도입되었을까요 ? React SPA가 도입되기 전의 전통적인 웹 사이트에서는 사용자가 웹 사이트 내의 다른 페 wldbseja.tistory.com 아무튼, 이제부터 Router 사용에 대해 자세히 알아봅시..
React SPA를 본격적으로 알아보기 전에 , React SPA가 생긴 이유부터 알아봅시다. React SPA가 왜 도입되었을까요 ? React SPA가 도입되기 전의 전통적인 웹 사이트에서는 사용자가 웹 사이트 내의 다른 페이지로 이동하면 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 페이지 전체를 불러와야만 했습니다. 또한, 웹 사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었습니다. 이러한 문제점들을 보완하기 위해 등장한 것이 React SPA 입니다. 그래서 React SPA가 뭐에오 React SPA는 위에 있는 문제점들을 보완하여 HTML 문서 전체가 아니라 업데이트에 필요한 데이터만 받아 javascript가..
React JSX 알아보기 JSX ? React에서 사용되는 JavaScript의 확장 문법이다. JavaScript와 HTML을 혼합한 형태로 작성할 수 있기 때문에 React 컴포넌트의 UI를 구성하는 것이 유용하다. 그렇다면 JSX로 JavaScript 코드가 바로 실행되나 ? JSX는 JavaScript가 확장된 문법이지만 브라우저가 바로 실행을 할 수 있는것이 아니기 때문에 Babel 을 이용해서 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해야 한다. Babel ? Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 해주며, 컴파일 후에 JavaScript를 브라우저가 읽고 화면에 렌더링 해줄 수 있다. 그래서 JSX가 DOM보다 좋은 이유가 뭐에오 D..
