Front-end 썸네일형 리스트형 [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를.. 더보기 [React] 리스트(List)와 키(Key) 1. 개념 1) 리스트(List) - 같은 아이템을 순서대로 모아놓은 것 - 리스트를 위해 사용하는 도구인 자료구조는 배열(Array), 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 const numbers = [1, 2, 3, 4, 5]; 2) 키(Key) - 각 객체나 아이템을 구분할 수 있는 고유한 값 리액트에서는 배열과 키를 사용하여 반복되는 다수의 엘리먼트를 쉽게 렌더링할 수 있음 2. 여러개의 컴포넌트 렌더링하기 - 자바 스크립트 배열의 map() 함수 사용 - 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 결과(엘리먼트)를 배열로 만들어서 리턴하는 것 - map()함수 안에 있는 엘리먼트는 꼭 키가 필요함 mport React from 'react'; function Num.. 더보기 이전 1 2 3 4 5 6 다음
