본문 바로가기

전체 글

[JavaScript] 프로미스(Promise) 1. 동기식 처리 모델과 비동기식 처리 모델 1) 동기식 처리 모델(Synchronous processing model) - 직렬적으로 태스크(task) 수행 - 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 태스크는 대기 ex. 서버에서 데이터를 가져와서 화면에 표시하는 태스크를 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때 까지 이후의 태스크 들은 블로킹 됨 2) 비동기식 처리 모델(Asynchronous processing model, Non-Blocking processing model) - 병렬적으로 태스크(task) 수행 - 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 즉시 다음 태스크 실행 - 자바 스크립트의 대부분의 DOM 이벤트와 Timer함수(setTim.. 더보기
[CSS] 레이아웃(Layout)과 관련된 속성 1. 레이아웃(Layout) 화면에 엘리먼트들을 어떻게 배치할 것인지 의미 2. 레이아웃 관련 속성들 1) display 엘리먼트를 어떻게 표시할 지 그 방법에 관한 속성 div { display: none | block | inline | flex; } display: none; - 엘리먼트를 화면에 숨기기 위해 사용됨 - 엘리먼트가 존재하긴 하지만 화면에 보이지 않게 함 - 주로 자바스크립트 코드를 넣을 때 사용됨, 태그의 display 속성 기본값은 display: none; display: block; - 블록 단위로 엘리먼트를 배치 - 블록 단위: 엘리먼트가 새로운 줄에서 시작하여 위차한 곳 전체의 width를 차지한다는 것 - 대표적으로 , , ~ 태그의 display 속성 기본값은 displ.. 더보기
[React] Redux(리덕스) 리액트: 사용자 정의 태그, 컴포넌트를 만들어서 체계적이고 잘 정돈된 애플리케이션을 만들게 해주는 기술 0. 리덕스의 필요성 1) SPA(Single Page Application)의 단점 - 컴포넌트 간 state 공유 어려움 - 부모 컴포넌트에서 자식 컴포넌트로만 state 공유 가능 2) Context API를 사용할 수 있지만 단점이 존재함 - state 변경 시 Context value 값이 변경되면 value값을 사용하지 않은 컴포넌트까지 재렌더링(쓸데없는 것 까지 재렌더링 됨 ) - useContext를 사용하는 자식 컴포넌트를 재사용하기가 어려움 더보기 1. Context API 사용 1) createContext() 로 Context 만들기 - context는 state 보관함 expor.. 더보기
[React] 스타일드 컴포넌트(styled-compnents) styled-compnents - CSS문법을 그대로 사용하면서 결과물을 스타일링 된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리 - 컴포넌트 개념을 사용하기 때문에 리액트와 궁합이 잘 맞음 - 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정 - 로 넣어주기 때문에 페이지 로딩 시간 단축 1) styled-compnents설치 # npm을 사용하는 경우 npm install --save styled-components # yarn을 사용하는 경우 yarn add styled-components 2) styled-components 기본 사용법 - 태그드 템플릿 리터럴(tagged template literal)을 사용하여 구성 요소의 스타일 지정 템플릿 리터럴 - 리터럴을 템플릿 형태로 사용.. 더보기
[React] 컨텍스트(context) 1. 컨텍스트(Context) 개념 - 컴포넌트들 사이에서 데이터를 props를 통해 전달하는 것이 아닌 컴포넌트 트리를 통해 곧바로 데이터를 전달하는 방식 - 어떤 컴포넌트든지 컨텍스트에 있는 데이터에 쉽게 접근할 수 있음 사용하는 시점 - 여러 컴포넌트에서 계속해서 접근이 일어날 수 있는 데이터가 있는 경우 - Provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 컨텍스트의 데이터를 읽을 수 있음 사용 전 고려할 점 - 컴포넌트와 컨텍스트가 연동되면 재사용성이 떨어짐 - 다른 레벨의 많은 컴포넌트가 데이터를 필요로 하는 경우가 아니라면 기존 방식대로 props를 통해 데이터를 전달하는 것이 더 적합 컨텍스트 API -React.createContext() 컨텍스트를 생성하기 위한.. 더보기
[React] 합성(Composition)과 상속(Inheritance) 1. 합성(Composition) - 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 - 다양하고 복잡한 컴포넌트를 효율적으로 개발할 수 있음 2. 합성 기법 1) Containment - 하위 컴포넌트를 포함하는 형태의 합성 방법 - 리액트 컴포넌트의 props에 기본적으로 들어있는 children 속성을 사용 - 여러 개의 children 집합이 필요한 경우 별도로 props를 각각 정의해서 사용 2) Specialization - 범용적인 개념을 구별되게 구체화하는 것 - 범용적으로 쓸 수 있는 컴포넌트를 만들어 놓고 이를 구체화시켜서 컴포넌트를 사용하는 합성 방법 3) Containment와 Specialization - props.children을 통해 하위 컴포넌트를 포함시키기(Con.. 더보기
[React] props 1. Props의 개념 Property: 속성, 특성 - 리액트 컴포넌트의 속성(property) - 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 - 같은 컴포넌트이지만 색상, 배경, 글자 등의 세부 속성이 다른 것 => 컴포넌트의 모습과 속성을 결정하는 것 - 자식 컴포넌트가 부모 컴포넌트의 state를 가져다 쓸 때 사용(부모 컴포넌트 -> 자식 컴포넌트 state 전달) cf) 자식 컴포넌트 -> 부모 컴포넌트로 props 전달 불가, 형제 컴포넌트로 전달 불가 - state를 사용하는 컴포넌트들 중 최상위 컴포넌트에 만들 것 2. Props의 특징 - 읽기 전용(Read-Only) // pure함수: input(입력값)을 변경하지 않으며 같은 input에 대해서 항상 같은 outp.. 더보기
[React] 폼(form) 1. 폼(Form) - 사용자로부터 입력을 받기 위해 사용하는 양식 1) 리액트 폼 - 리액트 컴포넌트 내부에서 state를 통해 관리함 - state의 값을 변경하기 위해서 무조건 setState() 함수 사용 2) HTML폼 - 엘리먼트 내부에 각각의 state가 존재 - 각 엘리먼트가 자체적으로 state 관리 이름: 제출 2. 제어 컴포넌트(Controlled Components) - 사용자가 입력한 값에 접근하고 제어할 수 있게 해주는 컴포넌트 - 값이 리액트의 통제를 받는 입력 폼 엘리먼트 import React, {useState} from "react"; // SignUp 컴포넌트 function SignUp(props) { // 태그에 입력된 값을 저장하기 위한 name이라는 state를.. 더보기

티스토리툴바