전체 글
Styling
CSS와 selectorCascading Style Sheets웹페이지의 디자인, 레이아웃 및 스타일을 정의하기 위한 언어 h1 { color: green; font-size: 16px; }h1 : Selector(선택자)color, font-size : property(속성)green, 16px : Value(값)color: green; / font-size: 16px; => Declaration(선언) Selector의 유형유형ElementIDClassUniversalGrouping h1 { color: green; }... ... ...* {font-size: 20px;color: blue;} h1, h2, p {color:black;text-align: center;} #section {back..
Context
Context란? 기존에는 컴포넌트의 props를 통하여 단 방향 데이터 전달되었다.여러 컴포넌트를 거쳐 자주 사용되는 데이터의 경우 코드의 복잡성과 불편함을 야기한다.이를 개선하고자 Context를 사용한다.Component Tree를 통해 직접적으로 전달하여 위 문제점을 해결 언제 Context를 사용해야 할까?여러 개의 Component들이 접근해야 하는 데이터 ex) 로그인 여부, 로그인 정보, UI테마, 현재 언어 등... Context 적용 전function App(props) { return ;}function Toolbar(props) { // 이 Toolbar 컴포넌트는 ThemedButton에 theme를 넘겨주기 위해서 'theme' prop을 가져야만 합니다. //..
Composition vs Inheritacne
Composition여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 (합성) Containment하위 컴포넌트를 포함하는 형태의 합성 방법Sidebar나 Dialog 같은 Box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다.이러한 컴포넌트에는 특수한 children prop을 사용하여 자식 엘리멘트를 출력에 그대로 전달하는 것이 좋다.// children이라는 prop을 사용해서 조합// children prop을 사용한 FancyBorder 컴포넌트function FancyBorder(props) { return ( {props.children} );}React.createElement( type, [props]..
Lifting State Up
여러개의 컴포넌트들 사이에서 State를 공유하는 방법 Shared StateState에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 사용하나의 데이터를 여러 개의 컴포넌트에서 표현 하위 컴포넌트에서 State 공유하기물의 끓음 여부를 나타내는 컴포넌트를 만들어 보자 import { useState } from "react";function BoilingVerdict(props) { if(props.celsius >= 100) { return 물이 끓습니다.; } return 물이 끓지 않습니다.;}function Calculator(props) { const [temperature, setTemperatur..
Forms
Form과 Controlled Component Form 사용자로부터 입력을 받기 위해 사용 Name: 이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행합니다. React에서 동일한 동작을 원한다면 그대로 사용하면 됩니다. 그러나 대부분의 경우, JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리합니다. 이를 위한 표준 방식은 “제어 컴포넌트 (controlled components)“라고 불리는 기술을 이용하는 것입니다. 제어 컴포넌트 (Controlled Component) 값이 리액트의 통제를 받는 Input Form Element HTML Form Controlled Component 자체적으로 State를..
Lists and Keys
Lists와 Key List Key 목록 / 같은 아이템을 순서대로 모아 놓은 것 열쇠 / 각 객체나 아이템을 구분할 수 있는 고유한 JS에서는 List를 위해 Array를 사용 아이템을 구분하기 위한 고유한 문자열 const numbers = [1, 2, 3, 4, 5]; 여러개의 Component 렌더링하기 엘리먼트 모음을 만들고 중괄호 {}를 이용하여 JSX에 포함 시킬 수 있습니다. 아래의 JavaScript map() 함수를 사용하여 numbers 배열을 반복 실행합니다. 각 항목에 대해 엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장합니다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => ..