브래의 슬기로운 코딩 생활

리덕스 개념 리덕스 Redux의 탄생의 배경 "수많은 상태들을 어떻게 효과적으로 관리할 것인가?" 상태 관리 라이브러리 리덕스 장점 ⁃컴포넌트 코드로부터 상태 관리 코드를 분리할수 있다. ⁃미들웨어를 활용한 다양한 기능 추가 ⁃ 강력한 미들웨어 라이브러리 redux-saga ⁃ 로컬 스토리지에 데이터 저장하기 및 불러오기 ⁃SSR(서버사이드 랜더링) 시 데이터 전달이 간편하다. ⁃리액트 콘텍스트보다 효율적인 렌더링 기능 리덕스 dataflow 리덕스 필수인가? 1. 복잡도가 낮을때는 : context 사용 2. 복잡할때는 상태관리 라이브러리 - 하나의 상태를 여러 컴포넌트에서 접근해야되는 경우 - 한곳에서 상태를 관리하고 싶은경우 액션 액션은 type 속성값을 가지고 있는 객체 . type속성은 유니크 ..

API Axios ⁃API 연동을 위한 HTTP 통신 라이브러리 axios 설치 axios 사용법 OpenWeather API (https://openweathermap.org/) ⁃ 날씨 정보를 제공해주는 API. 기능에 따라 유/무료 제공 ⁃ 회원 가입 후 api key를 발급받아 사용 API Test Talend API Tester – chrome 웹 확장 프로그램 •웹 스토어에서 api tester 검색하여 설치 •REST API에 대응하는 다양한 HTTP METHOD 제공 - GET: 데이터 조회 - POST: 데이터 등록 - PUT: 데이터 수정 - DELETE: 데이터 삭제 Current Weather API Test HTTP 상태 코드 ⁃특정 HTTP 요청이 성공적으로 완료되었는지를 판별하..

Shared State shared state •하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우 -각 컴포넌트의 state에서 데이터를 각각 보관하지 않고, 공통된 부모 컴포넌트의 state를 공유해서 사용하는 것이 효율적 •어떤 컴포넌트의 state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용 •하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용 하위 컴포넌트에서 State 공유하기 state를 공유하는 컴포넌트 만들어 보기 1. 물의 끓음 여부를 알려주는 컴포넌트 1-1. 사용자의 입력값을 받아서 물이 끓는지 판별하는 컴포넌트 2. 입력 컴포넌트 추출하기 - 섭씨/화씨온도를 입력받기 위해 재사용 가능한 컴포넌트로 추출 2-1. 추출한 입력 컴포넌트 적용 - 사..

폼(Forms) 폼이란? Form •사용자로부터 입력을 받기 위해 사용하는 양식 •리액트와 HTML 폼의 차이 - 리액트는 컴포넌트 내부에서 state를 통해 데이터를 관리 - HTML 폼은 엘리먼트 내부에 각각의 state가 존재 제어 컴포넌트 제어 컴포넌트(Controlled Components) •React에 의해서 값이 제어되는 컴포넌트 (input form element) •제어 컴포넌트를 사용하면 입력값이 리액트 컴포넌트의 state를 통해 관리할 수 있음 •사용자의 입력을 직접적으로 제어할 수 있음 -입력 양식의 초기값을 원하는대로 지정 -어떤 양식의 값이 변경되었을 때 다른 양식의 값을 자동으로 변경할 수 있음 textarea 태그 textarea 태그 - 여러 줄 입력을 통해서 긴 텍스트..

합성 vs 상속 합성에 대해 알아보기 합성(Composition) •여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 Containment 하위 컴포넌트를 포함하는 형태의 합성 방법 •Sidebar, Dialog 같은 박스 형태의 컴포넌트는 어떤 자식 엘리먼트가 들어올지 예상할 수 없음 •이러한 컴포넌트에서는 Containment 합성 방법을 사용 - 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달 Specialization 범용적인 컴포넌트를 만들어 놓고 이를 특수화(구체화)시켜서 컴포넌트를 합성하는 방식 •범용적인 Dialog 컴포넌트 – 모든 종류의 Dialog를 포함하는 개념 •Welcome Dialog는 환영을 위한 구체화된 Dialog 컴포넌트 •Alert..

컨텍스트(Context) 컨텍스트란 무엇인가? 컴포넌트 간 데이터 전달 방식 리액트 컴포넌트 사이에서 props를 통해 데이터를 전달하는 방식 부모에서 자식으로 단방향 전달 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우 depth가 깊어질수록 반복적인 코드 생성, 사용하기 불편 Context - React 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안된 방법 - 컴포넌트 트리를 통해 곧바로 컴포넌트에 데이터를 전달하는 방식 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있음 데이터를 한곳에서 관리 - 코드가 단순해지고 디버깅에 유리 언제 컨텍스트를 사용해야 할까? 여러 컴포넌트에서 자주 사용하는 데이터를 사용할 경우 사용자의 로그인 여부, 로그인 정보, UI 테마, 현재 선택된 언어 e..

리스트와 키란 무엇인가? 리스트(List) •같은 아이템을 순서대로 모아놓은 것 •리스트를 위해 사용하는 구조 – 배열 •배열 – 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 ◦키(Key) •각 객체나 아이템을 구분할 수 있는 고유한 값 - 리액트에서는 배열과 키를 사용하여 반복되는 다수의 엘리먼트를 쉽게 렌더링할 수 있음 여러 개의 컴포넌트 렌더링하기 컴포넌트 반복 구조 Array.map() •배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 currentValue : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : map()을 호출한 배열 리스트의 키에 대해 알아보기 리스트의 키 •리스트에서 아이템을 구분하기 위한 고유한 값 ..

조건부 렌더링이란? 조건부 렌더링(Conditional Rendering) •어떠한 조건에 따라서 렌더링이 달라지는 것 •조건문의 결과 true/false에 따라서 렌더링을 다르게 하는 것 ex. 조건문의 값이 true이면 버튼을 보여주고 false이면 버튼을 가림 자바스크립트의 Truthy와 Falsy truthy - true는 아니지만 true로 여겨지는 값 - { } (empty object) - [ ] (empty array) - 42 (number, not zero) - “0”, “false” (string, not empty) flasy – flase는 아니지만 flase로 여겨지는 값 - 0, -0 (zero, minus zero) - 0n (Bigint zero) - ‘ ‘, “ “, ` ..

컴포넌트와 Props 컴포넌트 기반 구조 (Component-Based) •컴포넌트 - 독립적인 기능을 수행하는 작은 기능 단위 모듈 •리액트에서는 모든 페이지가 컴포넌트로 구성됨 •하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음 -레고 블록을 조립하는 것처럼 컴포넌트를 조합해서 사용 •컴포넌트 사용 - 개발 시간을 줄이고 유지보수 비용도 줄일 수 있음 함수와 리액트 컴포넌트 리액트 컴포넌트 •어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴 •객체 지향 개념에서 나오는 클래스와 인스턴스의 개념과 비슷 Props •Property - 속성 •리액트 컴포넌트의 속성 Props - 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 •컴포넌트의 모습..

리액트란? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 SPA를 쉽고 빠르게 만들수 있도록 해주는 도구 ◦SPA (Single Page Application) - 단일 페이지로 구성된 웹 어플리케이션 - 하나의 HTML 틀을 만들어 놓고, 사용자가 특정 페이지를 요청할 때, 그 페이지에 해당하는 콘텐츠를 가져와서 동적으로 페이지의 내용을 채워서 보여주는 방식 리액트의 장점 빠른 업데이트와 렌더링 속도 재사용성이 높은 컴포넌트 기반 구조 활발한 지식 공유와 커뮤니티 리액트 네이티브를 통한 모바일 앱 개발 가능 리액트의 단점 방대한 학습량 높은 상태 관리 복잡도 엘리먼트 렌더링 엘리먼트 어떤 물체를 구성하는 성분 리액트 앱을 구성하는 가장 작은 블록들 DOM 엘리먼트 ⁃HTML 요소 리액트 엘리먼..