프론트엔드/React 공식문서 읽기

State 끌어올리기

https://ko.reactjs.org/docs/lifting-state-up.html를 읽고 정리한 글입니다 클래스형 컴포넌트로 작성된 코드를 함수형 컴포넌트로 바꿨다. Calculator.jsx import { useState } from "react"; import TemperatureInput from "./TemperatureInput"; function toCelsius(fahrenheit) { return ((fahrenheit - 32) * 5) / 9; } function toFahrenheit(celsius) { return (celsius * 9) / 5 + 32; } function tryConvert(temperature, convert) { const input = parseF..

폼

https://ko.reactjs.org/docs/forms.html를 읽고 정리한 글입니다 제어 컴포넌트 (controlled components) : React에 의해 값이 제어되는 입력 폼 엘리먼트 HTML의 Form Element(예 : , , )는 일반적으로 사용자의 입력 기반으로 자신의 state 관리 및 업데이트 React에서는 일반적으로 변경 가능한 state가 컴포넌트의 state 속성에 유지되며, setState()로 업데이트 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소 결합 가능 ⇒ React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어 // input 태그 // textarea 태그 (일부 텍스트를 가진 채 시작)..

리스트와 Key

https://ko.reactjs.org/docs/lists-and-keys.html를 읽고 정리한 글입니다 리스트 컴포넌트 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => {number} ); return ( {listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') ); Key React가 어떤 항목을 변경, 추가, 삭제할지 식별 엘리먼트의 안정적인 고유성 부여하기 위함 리스트 내에서 고유하게 식별할 수 있는 항목의 문자열 사용하는 것 권장 (예 :..

조건부 렌더링

https://ko.reactjs.org/docs/conditional-rendering.html를 읽고 정리한 글입니다 조건부 렌더링은 JavaScript의 조건 처리처럼 동작 인라인으로 표현하기 ⇒ 조건이 너무 복잡하다면 컴포넌트를 분리하기 // 방법 1 {isLoggedIn && } // 방법 2 {isLoggedIn ? : } 렌더링 과정에서 컴포넌트 자체를 숨기고 싶을 때, 렌더링 결과 대신 null을 반환하기 falsy 표현식을 반환하면 && 뒤의 표현식은 건너뛰지만 falsy 표현식이 반환 falsy 표현식 : boolean에서 false로 평가되는 값 false, 0, -0, 0n, "", null, undefined, NaN

이벤트 처리하기

https://ko.reactjs.org/docs/handling-events.html를 읽고 정리한 글입니다. React의 이벤트는 camelCase 사용 preventDefault를 사용해서 기본 동작을 방지 e는 합성 이벤트이며, React는 W3C 명세에 따라 합성 이벤트를 정의하므로 브라우저 호환성에 대해 걱정할 필요 없다 JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않다 방법 3의 문제점은 LoggingButton이 렌더링될 때마다 다른 콜백이 생성된다는 것 콜백이 하위 컴포넌트에 props로 전달된다면 그 컴포넌트들이 추가로 다시 렌더링 수행 가능 // 방법 1 class Toggle extends React.Component { constructor(props) { ..

State and Lifecycle

https://ko.reactjs.org/docs/state-and-lifecycle.html을 읽고 정리한 글입니다. State : props와 유사하지만, 비공개이며 컴포넌트에 의해 제어된다 componentDidMount() : 컴포넌트 출력물이 DOM에 렌더링된 후 실행 componentWillUnmount() : 컴포넌트가 마운트 해제되어 제거되기 직전에 호출 다시 렌더링되지 않으므로 이 안에서 setState() 호출 불가능 State setState()를 이용해 state 값 수정하기 업데이트는 비동기적 여러 개의 변수를 독립적으로 업데이트 // Correct 1 this.setState((state, props) => ({ counter: state.counter + props.increm..

Components와 Props

https://ko.reactjs.org/docs/components-and-props.html를 읽고 정리한 글입니다. Component JavaScript 함수와 요사 props(임의의 입력)을 받고, React Element(화면에 어떻게 표시되는지 기술) 반환 함수형 컴포넌트, 클래스형 컴포넌트(함수형 컴포넌트보다 몇 가지 추가 기능 존재) 사용자 정의 컴포넌트는 대문자로 시작 다른 컴포넌트 참조 가능 ⇒ 버튼, 폼, 다이얼로그 등이 모두 컴포넌트 Button, Panel 등 여러 번 사용될 때는 재사용 가능한 컴포넌트를 만들고 App, Comment처럼 복잡한 경우도 컴포넌트 추출하기 컴포넌트 랜더링 function Welcome(props) { return Hello, {props.name};..

Rendering Elements (엘리먼트 렌더링)

https://ko.reactjs.org/docs/rendering-elements.html 를 읽고 정리한 글입니다. Element(엘리먼트) : React 앱의 가장 작은 단위 화면에 표시할 내용 기술 컴포넌트의 구성 요소 / React 애플리캐이션을 구성하는 블록 일반 객체(plain object)이며 쉽게 생성 가능 (브라우저 DOM 엘리먼트와는 다름) 엘리먼트는 특정 시점의 UI를 보여준다 일반적으로 엘리먼트는 직접 사용되지 않고 컴포넌트로부터 반환된다 React DOM : React 엘리먼트와 일치하도록 DOM을 업데이트 리액트로 구성된 애플리케이션은 일반적으로 하나의 root DOM node가 있다 React Element를 root DOM node에 렌더링하기 위해서는 ReactDOM.re..

JSX 소개

https://ko.reactjs.org/docs/introducing-jsx.html 를 읽고 정리한 글입니다. JSX : JavaScript를 확장한 문법 HTML보다 JavaScript에 가깝기 때문에 camelCase 표기법 사용 JavaScript 코드 안에서 UI 관련 작업 시 시각적으로 도움이 되며, 에러 및 경고 메시지에 효율적 JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식 포함 가능 컴파일이 끝나면, JSX 표현식은 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다 JSX 태그는 자식 포함 가능 JSX에 사용자 입력을 삽입하는 것은 안전 React DOM은 JSX에 삽입된 모든 값을 랜더링하기 전에 이스케이프하므로 애플리케이션에서 명시적으로 작..