브래의 슬기로운 코딩 생활

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

스타일링 – 고급 부트스트랩 https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr 트위터에서 시작된 오픈 소스 프론트엔드 프레임워크 머티리얼 아이콘 설정 https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide r..

스타일링 CSS CSS (Cascading Style Sheets) •HTML – 콘텐츠의 구조와 의미를 정의 •CSS – 스타일과 레이아웃을 정의 •CSS는 크게 선택자(selector)와 스타일로 구성 Selector - 스타일을 어떤 엘리먼트에 적용할지를 선택하게 해주는 것 Selector의 유형 •Element selector •ID selector •Class selector •Universal selector •Grouping selector •Element의 상태와 관련된 selector •Element selector 특정 HTML 태그를 선택 •ID selector element에 고유한 id를 정의하고 이 id를 기반으로 선택 / #뒤에 id를 붙여서 사용 •Class selector ..

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

합성 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) - ‘ ‘, “ “, ` ..