FrontEnd/React
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) => ..
Conditional Rendering
Conditional Rendering이란? 조건에 따라 다른 컴포넌트나 UI 요소를 렌더링하는 것 ex) True -> ShowButton() / False -> HideButton() 예제 코드 function UserGreeting(props) { return 다시 오셨군요!; } function GuestGreeting(props) { return 회원가입을 해주세요.; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if(isLoggedIn) { return ; } return ; } Javascript Truthy와 Falsy Truthy : True는 아니지만 True로 여겨지는 값 Falsy : False는 아니지만 Fa..
Handling Events
Event Handling 이벤트 핸들링(event handling)이란 웹 페이지에서 사용자 상호작용(user interaction)과 관련된 동적인 기능을 구현하기 위해 사용되는 기술이다. 이벤트란 사용자가 발생시키는 클릭, 키보드 입력, 스크롤 등과 같은 행위를 의미 이러한 이벤트가 발생했을 때 브라우저가 이를 감지하고, 이벤트를 처리할 수 있는 JavaScript 코드를 실행하는 과정이다. 사용자 상호작용에 따라 동적으로 반응하거나, 데이터를 업데이트하거나, UI를 변경하는 등 다양한 동작을 수행 가능하다. DOM / React Event // DOM Activate // React (camel case) Activate Event Handler (Event Listener) 이벤트를 처리하는 함..