[React] 리액트 스터디

팀끼리 리액트 스터디를 시작하기로 했다.참고할 책은 <리액트를 다루는 기술>로 결정!!!

📍 리액트(React)란? 리액트는 사용자 인터페이스를 만드는 데 사용되는 자바스크립트 라이브러리로 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리이다. 그렇다면, 자바스크립트(JavaScript)는 또 무엇일까? 👉

👉 리액트의 등장 배경은? 한마디로 점점 더 동적이고 복잡해져가는 웹,앱 때문이라고 할 수 있다.동적이고 복잡한 웹 페이지가 늘어나면 크기가 커짐. 이로 인해 자바스크립트 파일 관리, 상태 관리가 힘들어짐.페이지 간에 이동 시에 HTML, CSS, Javascript

📍 렌더링(Rendering) 이란?사용자 화면에 뷰를 보여 주는 것❓🤔 리액트 라이브러리는 어떻게 뷰를 렌더링하기에 데이터가 변할 때마다 새롭게 리렌더링해서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있는걸까?이를 알기 위해서는 리액트 컴포넌트가 최초로 실행

리액트 라이브러리에서 중요한 부분인 업데이트에 대해 알아보자!리액트에서 뷰를 업데이트할 때 '업데이트 과정'보다는 '조화 과정(Reconciliation)'이라고 하는 게 더 정확하다.❓🤔 왜일까?컴포넌트에서 데이터에 변화가 있을 때 변화에 따라 뷰가 변형되는 것 같

이미 한 번 간단히 정리했지만, DOM과 VDOM에 대해 조금 더 알아보자!웹 브라우저는 DOM을 활용해 객체에 자바스크립트와 CSS를 적용함. DOM은 트리 형태라서 특정 노드 찾기, 수정, 제거, 삽입이 가능하다.하지만, 문제점도 있다. DOM은 동적 UI에 최적화

지금까지 1장에서 리액트의 여러가지 특징에 대해 알아봤다. 그럼 그 외에 리액트의 기타 특징으로는 뭐가 있는지 더 살펴보자!리액트는 프레임워크가 아니라 라이브러리이다.다른 웹 프레임워크는 Ajax, 데이터 모델링, 라우팅 등 기능을 내장하고 있지만, 리액트는 뷰만 신경

📍 Node.js란?크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임. 이를 통해 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용해 연산할 수 있다.① 리액트 프로젝트를 만드려면 Node.js를 반드시 먼저 설치해야 한다. 리액트 애플리케이션은 웹 브라

📍 JSX(JavaScript XML)란? JSX는 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환된다. (+) 번들링과

감싸인 요소컴포넌트에 여러 요소가 있을 경우 반드시 부모 요소 하나로 감싸야 한다. ❓🤔 리액트 컴포넌트에서는 왜 요소 여러 개를 하나의 요소로 꼭 감싸야 할까? 그 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적인 비교를 위해 컴포넌트 내부는

ESLint 👉 문법 검사 도구잘못된 코드를 작성 시 에러 또는 경고 메시지를 VS Code 에디터에서 바로 확인 가능하다. Prettier 👉 코드 스타일 자동 정리 도구JSX 작성 시 코드의 가독성을 위해 들여쓰기를 사용한다. Prettier를 사용해 자동 코

Q1. 번들링은 왜 해야하는 걸까?👉 파일, 코드 등이 많을 때, 번들링 툴이 불필요한 것들은 없애주고 전체적으로 통합해 줌. 즉, 용량을 줄이기 위함이라고도 볼 수 있다. 그렇다면 용량은 왜 줄여야하는 걸까? 코드 관리는 모듈화하는 게 좋고, 네트워크는 아껴야 한다

📍 컴포넌트(Component)란?리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용하는데, 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있다 컴포넌트는 새로운 컴포넌트를 생성할 수도 있고, MVC의 뷰를 독립적으로 구성해 재사용할 수도 있다

ES6 문법에서 함수를 표현하는 새로운 방식기존 function을 이용한 함수 선언 방식을 아예 대체하지는 않음주로 함수를 파라미터로 전달할 때 유용값을 연산해 바로 반환해야 할 때 사용하면 가독성을 높일 수 있음❓🤔 기존 function을 대체할 수 없는 이유는?화

export default MyComponent;다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정함.상단 import 구문 만들어 놓은 MyComponent 컴포넌트를 불러옴.

📍 propsproperties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. (+) (예제에서는 App 컴포넌트가 부모 컴포넌트임!)JSX 내부에서 props 렌더링

📍 childrenchildren은 컴포넌트 태그 사이의 내용을 보여 주는 props이다.MyComponent 태그 사이에 작성한 리액트라는 문자열을 MyComponent 내부에서 보여 주려면 props.children 값을 보여줘야 함.MyComponent를 다음과

컴포넌트의 필수 props를 지정할 때, props의 타입(type)을 지정할 때는 propTypes를 사용해야함!컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷함. 먼저 코드 상단에 import 구문을 사용하여 불러와야 함.예

❓🤔클래스형 컴포넌트에서 props를 사용할 때는?👉 render 함수에서 this.props를 조회한다. defaultProps와 propTypes는 똑같은 방식으로 설정할 수 있다.Component를 클래스형 컴포넌트로 변환class 내부에서 지정하는 방법(+)

📍state리액트에서 state란, 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있음. props를 바꾸려면 부모 컴포넌트에서 바

state 객체 안에는 여러 값이 있을 수 있다.Counter.jsc버튼이 클릭될 때 fixedNumber 값은 그대로 두고 number 값만 바꿈. 그렇다고 해서 this.setState 함수를 사용할 때 인자로 전달되는 객체 내부에 fixedNumber를 넣어 주지

👉 this.setState에 객체 대신 함수 인자 전달하기 this.setState를 사용해 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트 됨. 만약 onClick에 설정한 함수 내부에서 this.setState를 두 번 호출한다면? Counter

16.8 이후부터는 useState 함수를 사용해 함수형 컴포넌트에서도 state를 사용할 수 있게 됨! 이 과정에서 Hooks라는 것을 사용함. Hooks를 사용하기 전에 배열 비구조화 할당부터 알아보자.

예시1) 이벤트 이름은 카멜 표기법으로 작성한다.2) 이벤트에 실행할 자바스크립트 코드를 전달하는 게 아니라 함수 형태의 값을 전달한다.HTML에서 이벤트를 설정할 때: 큰따옴표 안에 실행할 코드를 넣음. 리액트에서 이벤트를 설정할 때: 함수 형태의 객체를 전달함.3)

App.jsx에서 EventPractice 렌더링그리고 나서 App 컴포넌트에서 EventPractice를 불러와 렌더링해보자! onChange 이벤트 설정EventPractice 컴포넌트에 input 요소를 렌더링하는 코드와 해당 요소에 onChange 이벤트를 설

이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. 그래서 이벤트를 처리할 때 렌더링을 하는 동시에 함수를 만들어서 전달해 줬다. 이 방법 대신 함수를 미리 준비하여 전달하는 방법도 있다. 성능상으로는 차이가 거의 없지만, 가독성은

메서드 바인딩은 생성자 메서드에서 하는 게 정석! 하지만 이 작업을 불편하다고 느낄 수도 있다. 새 메서드를 만들 때마다 constructor도 수정해야 하기 때문... 이 작업을 좀 더 간단하게 하는 방법이 있는데, 바로 바벨의 transform-class-pr

input 값을 state에 넣는 방법은 앞에서 알아봤지만, input이 여러 개일 때는 어떻게 작업할지는 아직 모른다. 메서드를 여러 개 만드는 것도 하나의 방법이지만, 더 쉬운 처리가 가능하다.바로 event 객체를 활용하는 것! e.target.name 값을 사

키를 눌렀을 때 발생하는 KeyPress 이벤트를 처리하는 방법을 알아보자.EventPractice.jscomment 인풋에서 Enter를 눌렀을 때 handleClick 메서드를 호출하도록 코드두 번째 텍스트 인풋에서 텍스트를 입력하고 Enter를 눌렀을 때handl

아까 작업을 함수형 컴포넌트로도 똑같이 구현 가능하다. 기존 EventPractice 컴포넌트를 모두 지우고 다음과 같이 작성해보자.ventPractice.jsx기능이 이전과 같이 잘 작동하는지 확인해보자.위 코드에서는 e.target.name을 활용하지 않고 onCh

일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. DOM 요소의 id❓🤔 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면?👉 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할

❓🤔 ref는 어떤 상황에서 사용해야 할까?👉 특정 DOM에 작업을 해야 할 때 ❓🤔 대체 ‘어떤’ 작업을 할 때 ref를 사용해야 하는 걸까? 👉 DOM을 꼭 직접적으로 건드려야 할 때일반 HTML 예제 코드 (http://jsbin.com/qawuc

App 컴포넌트에서 ValidationSample 컴포넌트를 불러와 렌더링해 보자!그 과정에서, App 컴포넌트를 함수형 컴포넌트에서 클래스형 컴포넌트로 전환할 것임...그리고 추후 App 컴포넌트에서 ref를 사용할거라서 미리 클래스형 컴포넌트로 작성했다.App.js

앞 예제에서는 state를 사용하여 우리에게 필요한 기능을 구현했다. ❓🤔 가끔 state만으로 해결할 수 없는 기능이 있다. 어떤 상황인지 알아볼까요?특정 input에 포커스 주기스크롤 박스 조작하기Canvas 요소에 그림 그리기 등

앞서 어쩔 수 없이 DOM에 직접적으로 접근해야 할 때, ref를 사용한다고 배웠다.ref를 사용하는 두 가지 방법을 알아보자!콜백 함수 사용은 ref를 만드는 가장 기본적인 방법으로 ref를 달고자 하는 요소에 ref 콜백 함수를 props로 전달해 주면 된다. 이

리액트에서는 컴포넌트에도 ref를 달 수 있다. 이 방법은 주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 사용한다.컴포넌트에 ref를 다는 방법은 DOM에 ref를 다는 방법과 똑같다.이렇게 하면 MyComponent 내부의 메서드 및 멤버 변수에도

IterationSample.js반복되고 있는 형태코드가 좀 더 복잡하면 코드양도 늘어나고, 파일 용량도 쓸데없이 증가하게 된다. 이는 낭비이다. 또 보여 주어야 할 데이터가 유동적이라면 이런 코드로 관리하기 힘들다.반복적인 내용을 효율적으로 보여 주고 관리하는 방법을

📍 자바스크립트 배열 객체의 내장 함수인 map 함수 map 함수를 사용해 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다.파라미터callbac

기존 배열에 있는 값들을 제곱하여 새로운 배열을 생성했는데, 똑같은 원리로 기존 배열로 컴포넌트로 구성된 배열을 생성할 수도 있다.IterationSample.js아까 만든 IterationSample 컴포넌트를 수정한다.문자열로 구성된 배열을 선언하고, 그 배열 값을

📍 key리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.예를 들어 유동적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 수도 있는데 key가 없을 때는 Virtual DOM을 비교하는 과정에서

📍 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다. ❓🤔 컴포넌트의 라이프사이클 메서드는 언제 사용할까? 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리

📍 Hooks 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공해 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줌. ① useState 가장 기본적인 Hook으

컴포넌트에서 비슷한 기능을 공유할 경우, 나만의 Hook으로 작성하여 로직을 재사용할 수 있다. 기존에 Info 컴포넌트에서 여러 개의 인풋을 관리하기 위해 useReducer로 작성했던 로직을 useInputs라는 Hook으로 따로 분리해 보자. 그리고 이 Hoo

리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다. 회사 요구 스펙, 개발자 취향 등에 따라 달라지는 부분이라 딱히 정해진 방식은 없다. 그냥 어떠한 방식이 있고 또 자주 사용되는 방식으로 무엇이 있는지 살펴보도록 하자! 일반 CSS : 컴포넌트를

프로젝트는 일반 CSS 방식으로 만들어져 있고, 가장 흔한 방식이다. CSS 작성할 때 가장 중요한 점- CSS 클래스를 중복되지 않게 만드는 것! CSS 클래스 중복을 방지하는 방식 - 이름을 지을 때 특별한 규칙을 사용하여 짓는 것 - CSS Selector를

📍 CSS Selector CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다. .App 안에 들어 있는 .logo에 스타일을 적용하고 싶을 때 기존 App.css와 App.js의 CSS 클래스 부분을 다시 작성한다면? 이런 식으로 컴포

📍 Sass(Syntactically Awesome Style Sheets) CSS 전처리기로 복잡한 작업을 쉽게 할 수 있게 해 줌. 스타일 코드의 재활용성을 높여줌. 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해 줌. 구버전에서는 추가 작업이 필요했는데, v

여러 파일에서 사용될 수 있는 Sass 변수 및 믹스인은 다른 파일로 따로 분리해서 적성하면 필요한 곳에서 불러와 사용할 수 있다. 예제 src 디렉터리에 styles라는 디렉터리를 생성하고, 그 안에 utils.scss 파일을 만든다. 그다음 기존 SassCompo

Sass를 사용할 때 반드시 해야 하는 작업은 아니지만 해 두면 유용하다. 예를 들어 방금 SassComponent에서 utils를 불러올 때 @import './styles/utils'; 형태로 불러왔는데, 만약 프로젝트에 디렉터리를 많이 만들어서 구조가 깊어졌다면

Sass는 라이브러리를 쉽게 불러와서 사용할 수 있다. yarn을 통해 설치한 라이브러리를 사용하는 가장 기본적인 방법은 상대 경로를 사용해 node_modules까지 들어가서 불러오는 것이다. 하지만 이런 구조는 스타일 파일이 깊숙한 디렉터리에 위치할 경우 ../

📍 CSS Module CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름][클래스 이름]_[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술 ❓🤔 CSS Module을 사용하려면? 👉 css-

📍 classnames CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리. CSS Module을 사용할 때 이 라이브러리를 사용하면 여러 클래스를 적용할 때 매우 편리하다. 이를 사용하기 위해서는 해당 라이브러리를 설치해야 한다. classnames의 기

Sass를 사용할 때도 파일 이름 뒤에 .module.scss 확장자를 사용하면 CSS Module로 사용 가능하다. CSSModule.module.css 파일의 이름을 CSSModule.module.scss로 변경해보기 CSSModule.module.scss

CSS Module에서 글로벌 클래스를 정의할 때 :global을 사용했던 것처럼 CSS Module이 아닌 일반 .css/.scss 파일에서도 :local을 사용하여 CSS Module을 사용 할 수 있다.

📍 styled-components 컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식(CSS-in-JS)이다. 이와 관련된 라이브러리 종류는 정말 많다. CSS-in-JS 라이브러리 중에서 개발자들이 가장 선호하는 styled-c

앞서 작성한 코드를 확인해 보면, 스타일을 작성할 때 `을 사용해 만든 문자열에 스타일 정보를 넣어줌. 이러한 문법을 Tagged 템플릿 리터럴이라고 함. ❓🤔 CSS Module을 배울 때 나온 일반 템플릿 리터럴과 다른 점은? 👉 템플릿 안에 자바스크립트 객체

① 스타일링된 엘리먼트 만들기 styled-components를 사용해 스타일링된 엘리먼트를 만들 때는 컴포넌트 파일의 상단에서 styled를 불러오고, styled.태그명을 사용해 구현한다. 예시 코드 styled.div 뒤에 Tagged 템플릿 리터럴 문법을

일반 CSS 클래스를 사용해 조건부 스타일링을 해야 할 때는 className을 사용해서 조건부 스타일링을 해 왔다. styled-components에서는 조건부 스타일링을 간단하게 props로도 처리 가능하다. 앞에서 작성한 Button 컴포넌트를 다시 한 번 확인

styled-components를 사용할 때 반응형 디자인을 어떻게 하는지 한번 알아보자. 브라우저의 가로 크기에 따라 다른 스타일을 적용하기 위해서는 일반 CSS를 사용할 때와 똑같이 media 쿼리(query)를 사용하면 된다. 이전에 작성한 Box 컴포넌트 수

1-1) 프로젝트 생성1-2) 필요한 라이브러리 설치1-3) Prettier 설정프로젝트의 최상위 디렉터리에 .prettierrc 파일 생성1-4) 기존 index.css 수정

components 디렉터리에 TodoInsert.jsx 파일과 TodoInsert.scss 파일 생성리액트 아이콘

일정 관리 항목이 보일 TodoListItem과 TodoList를 만들어보자. ① components 디렉터리에 TodoListItem.js와 TodoListItem.scss를 생성한다.TodoListItem.jsx② TodoList.jsx 파일, TodoList.sc

📌 나중에 추가할 일정 항목에 대한 상태들은 모두 App 컴포넌트에서 관리한다.✔ ① App에서 useState를 사용해 todos라는 상태를 정의하고✔ ② todos를 TodoList의 props로 전달해보자!App.jsxTodoList.jsx여기서는 조건부 스타

일정 항목을 추가하는 기능을 구현해 보자!해당 기능을 구현하려면 TodoInsert 컴포넌트에서 인풋 상태를 관리하고,App 컴포넌트에는 todos 배열에 새로운 객체를 추가하는 함수를 만들어줘야 한다.①-1. TodoInsert 컴포넌트에서 인풋에 입력하는 값을 관리

리액트 컴포넌트에서 배열의 불변성을 지키면서 배열 원소를 제거해야 할 경우에는 배열 내장 함수인 filter를 사용하면 매우 간편하게 가능하다.📍 배열 내장 함수 filterfilter 함수는 기존의 배열은 그대로 둔 상태에서 특정 조건을 만족하는 원소들만 따로 추출

수정 기능도 방금 만든 삭제 기능과 비슷하다.✔ ① onToggle이라는 함수를 App에 만들고✔ ② 해당 함수를 TodoList 컴포넌트에게 props로 넣어준다. ✔ ③ 그다음 TodoList를 통해 TodoListItem까지 전달해 주면됨!✅ 배열 내장 함수 ma

랙(lag)을 경험하기 위한 많은 데이터 렌더링 해보기...App.jsx 코드를 아래와 같이 수정해보자.App.jsx컴포넌트는 다음과 같은 상황에서 리렌더링이 발생한다. 자신이 전달받은 props가 변경될 때자신의 state가 바뀔 때부모 컴포넌트가 리렌더링될 때for

컴포넌트 리렌더링 방지 시, shouldComponentUpdate 라이프사이클을 사용하면 된다.하지만, 함수형 컴포넌트에서는 라이프사이클 메서드 사용이 불가능하므로 React.memo 함수를 사용한다. 📍 메모제이션 (Memoization)이란?퓨터 프로그램이 동일

✔ 사실 React.memo를 사용하는 것만으로 컴포넌트 최적화가 끝나지는 않는다. todos 배열이 업데이트되면 onRemove와 onToggle 함수도 새롭게 바뀌기 때문...✔ onRemove와 onToggle 함수는 배열 상태를 업데이트하는 과정에서 최신 상태의

📍 immer immer는 리액트에서 구조가 복잡한 객체도 쉽고 짧은 코드를 사용해 불변성(상태를 변경하지 않는 것)을 유지하면서 업데이트하기 위해 사용하는 라이브러리이다. immer 라이브러리 설치 라이브러리를 설치했다면 immer를 연습할 새로운 리액트 프로젝

📍 SPASPA(Single Page Application, 싱글 페이지 애플리케이션)란, 한 개의 페이지로 이루어진 애플리케이션을 의미한다. 전통적인 웹 페이지전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있음.사용자가 다른 페이지로 이동할 때마다 새로운

1. 프로젝트 생성, 라이브러리 설치 및 적용 > 📍 react-router-dom 라이브러리 설치 프로젝트에 리액트 라우터 적용하기 BrowserRouter 임포트 추가하고 src/main.jsx 파일에서 react-router-dom에 내장되어 있는 Bro

페이지 주소 정의 시, 가끔 유동적인 값을 전달해야할 수 있는데 이는 파라미터와 쿼리로 나눌 수 있다. > 파라미터 예시 : /profiles/velopert 쿼리 예시 : /about?details=true 유동적인 값 사용해야 하는 상황에서 둘 중 뭘 써야할지

📍 서브 라우트라우트 내부에 또 라우트를 정의하는 것을 의미한다. 📍 서브 라우트 사용법그냥 라우트로 사용되고 있는 컴포넌트 내부에 Route 컴포넌트를 또 사용하면 된다. 기존 App 컴포넌트에서는 두 종류의 프로필 링크를 보여 줬음. 이를 잘라내서 프로필 링

프론트는 확실히 빠르게 변하는 것 같다...개정판임에도 불구하고 책을 보면서 랜더링이 안 될 때가 꽤 많았는데,구글링 또는 쳇지피티로 확인해보면 기능이 사라지거나 다른 게 생겨서 안되는 거였다;; 13장만 하더라도 바뀐게 2~3개인가 발견했다.지금 이야기 할 부분 역시

해당 시리즈 이전 포스팅에 작성한 기능 외에도 리액트 라우터 부가 기능들이 더 있다. 책에 있는 것들로 확인해보고자 한다!withRouter Switch NavLink요 세 녀석들인데... 불안하다!!! 왠지 요 녀석들도 뭔가 사라졌거나 달라졌을 것 같다. 역시나 Re

웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 대표적인 게 서버의 API를 사용할 때인데, 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다.이 과정에서

📍 콜백 함수(callback function)콜백 함수는 다른 함수의 인자로 전달되어 특정 이벤트가 발생하거나 작업이 완료된 후 호출되는 함수로 주로 비동기 작업에 사용된다. 여러 번 순차적으로 처리하고 싶다면 콜백 함수를 중첩해 구현할 수 있는데, 가독성이 좋지

📍 axiosaxios는 자바스크립트 HTTP 클라이언트로 HTTP 요청을 Promise 기반으로 처리한다는 특징을 가지고 있다.axios 라이브러리 설치하기

npm axios 설치하기 > npm axios 설치 기본 사용법 1. Axios 사용 axios.get(url)로 데이터를 가져온다. 반환된 데이터를 response.data로 읽는다. 2. useEffect 사용 컴포넌트가 처음 렌더링될 때 API를 호출한다.

📍 React Context API React 애플리케이션에서 컴포넌트 간에 전역 상태를 관리하고 공유할 수 있도록 도와주는 기능 계층 구조가 깊은 컴포넌트에서도 Props Drilling(부모에서 자식, 손자 등으로 props를 계속 전달해야 하는 문제)을 방지하고

StaticContext.jsxStaticComponent.jsxDynamicContext.jsxDynamicComponent.jsx 두 가지 Context를 아래와 같이 App에서 각각 사용할 수 있다.App.jsx✅ 고정적 관리StaticComponent는 항상

새 Context를 만들 때는 createContext 함수를 사용하며, 파라미터에는 해당 Context의 기본 상태를 지정함!contexts/color.js \- ColorContext 안에 들어 있는 색상 보여주기이때 색상을 props로 받아오는 게 아니라 Colo

앞서 공부한 내용은 고정적인 값만 사용할 수 있었던 예제임. 이번엔 Context 값을 업데이트해야 할 경우엔 어떻게 해야하는지 알아보자! Context의 value에는 무조건 상태 값만 있어야 하는 것은 아님!!! 함수를 전달해 줄 수도 있음. 동적 Context

Context에 있는 값을 사용할 때 Consumer 대신 다른 방식을 사용하여 값을 받아 오는 방법을 알아보자!리액트에 내장되어 있는 Hooks 중에서 useContext라는 Hook을 사용하면, 함수형 컴포넌트에서 Context를 아주 편하게 사용할 수 있다.Col

리액트 상태 관리 라이브러리인 리덕스에 대해 알아보자!📍 리덕스(Redux) 라이브러리 JavaScript 상태 관리 라이브러리📍 Redux의 핵심 원칙Single Source of Truth 하나의 중앙 store에서 관리됨. 즉, 동일한 데이터는 항상 같은 곳에

상태에 어떤 변화가 필요하면 액션(action)이 발생함.하나의 객체로 표현되고, 다음과 같은 형식으로 이루어짐.✔ 그리고 액션 객체는 type 필드(액션의 이름)를 필수로 가지고 있어야 함!✔ 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이고, 작성자

리듀서(reducer)는 변화를 일으키는 함수로 상태(state)를 관리하는 핵심 개념 중 하나이다.✔ 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. ✔ 그리고 두 값을 참고해 새로운 상태를 만들어서 반환해 준다.⇒ 즉, 현

프로젝트에 리덕스를 적용하기 위해 스토어(store)를 만들어야 한다.✔ 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있고✔ 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있다.✔ 그 외에도 몇 가지 중요한 내장 함수를 지닌다.디스패치(dispatch)는

리덕스는 리액트에 종속된 라이브러리가 아님!리액트에서 사용하려고 만들어졌으나 다른 UI 라이브러리, 프레임워크와 함께 사용할 수 있음.바닐라(vanilla) 자바스크립트랑도 같이 사용할 수 있음. 바닐라(vanilla) 자바스크립트는 라이브러리, 프레임워크 없이 사용하

① 스타일 작성index.css ② index.html 수정index.htmlUI를 관리할 때 별도의 라이브러리를 사용하지 않음! 따라서 DOM을 직접 수정해 줘야 한다.다음과 같이 자바스크립트 파일 상단에 수정할 DOM 노드를 가리키는 값을 미리 선언해 주고, 기

\[React] 리액트 없이 쓰는 리덕스\_② 예제 따라하면서 코드를 작성하는데, 위와 같이 createStore에 밑줄이 그어졌다. We recommend using the configureStore method of the @reduxjs/toolkit packag

예제 막 따라하고 정신 팔려있는데, 갑자기 내가 만들지도 않았던 dist 폴더가 갑자기 생성되어 있었다.엥? 이게 뭐지!!??왜 생겼는지 이유를 찾아봄!dist 폴더번들링 도구(예: Parcel, Webpack, Vite 등)가 프로젝트 파일을 처리한 후 생성한 배포용

리덕스를 프로젝트에서 사용할 때 지켜야 하는 세 가지 규칙에 대해 알아보자!하나의 애플리케이션 안에는 하나의 스토어여러 개의 스토어 사용이 완전히 불가능한 것은 아님. 하지만, 상태 관리가 복잡해질 수 있어 권장되지 않음.리덕스 상태는 읽기 전용기존 리액트에서 set

리덕스를 사용해 리액트 애플리케이션 상태를 관리하는 방법을 알아보자! 소규모 프로젝트라면 컴포넌트가 가진 state를 사용하는 것으로도 충분하지만, 프로젝트의 규모가 크면 상태 관리가 번거로워질 수 있다.리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한