Tag: React Official Document

2020
0
DevelopReact

React로 사고하기

React Official Document주요개념 : React로 사고하기 목업으로 시작하기 1단계 : UI를 컴포넌트 계층 구조로 분할하기 2단계 : React로 정적인 버전 만들기 3단계 : UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기 4단계: State가 어디에 있어야 할 지 찾기 5단계: 역방향 데이터 흐름 추가하기

0
DevelopReact

합성(Composition) vs 상속(Inheritance)

React Official Document주요개념 : 합성(Composition) vs 상속(Inheritance) 컴포넌트에서 다른 컴포넌트를 담기 특수화 React에서 상속은? React Official Document주요개념#10. 합성(Composition) vs 상속(Inheritance) React는 상속 대신 합성을 사용하여 컴포넌트

2019
0
DevelopReact

State 끌어올리기

React Official Document주요개념 : State 끌어올리기 온도계산기 기본 컴포넌트 생성 두번째 Input 추가 하기 변환 함수 작성 State 끌어올리기 Calculator 변경사항 요약 Calculator 컴포넌트 수정하기 정리 교훈 React Official Document주요개념#9. State 끌어올리기온도 계산기기본

0
DevelopReact

폼

React Official Document주요개념 : 폼 HTML 에서의 Form React에서의 Form 제어 컴포넌트(Controlled Components) textarea 태그 select 태그 file input 태그 다중 입력 제어하기 제어되는 Input Null 값 React Official Document주요개념#8. 폼HTML

0
DevelopReact

리스트와 Key

React Official Document주요개념 : 리스트와 Key 자바스크립트에서 리스트 변환 리액트에서 여러개의 컴포넌트 렌더링 하기 기본 리스트 컴포넌트 Key Key로 컴포넌트 추출하기 Key는 주변 배열의 context에서만 의미를 지니고 있다. Key는 형제 사이에서만 고유한 값을 지녀야 한다. React에서 Key는 컴포넌트로 전달되지는

0
DevelopReact

조건부 렌더링

React Official Document주요개념 : 조건부 렌더링 조건 연산자 이용 엘리먼트(요소)를 변수에 저장하기 인라인으로 IF를 표현하기 논리 && 연산자로 if를 인라인으로 표현하기 삼항 연산자로 If-Else구문 인라인으로 표현하기 컴포넌트 렌더링 막기 setState 일괄처리 setState 일괄처리 해결 Re

0
DevelopReact

이벤트 처리하기

React Official Document주요개념 : 이벤트 처리하기 React 이벤트 문법 기본동작 방지 ( preventDefault ) 이벤트 리스너 예제 : Toggle 컴포넌트 만들기 React this constructor 내부에서 this 바인딩 public class field 문법 콜백에 화살표 함수 사용 constr

0
DevelopReact

State and Lifecycle

React Official Document주요개념 : State and Lifecycle 함수에서 클래스로 변환하기 클래스에 지역 State 추가하기 생명주기 메서드를 클래스에 추가하기 componentDidMount() 메서드 구현 componentWillUnmount() 메서드 구현 tick() 함수 구현 호출 순서 요약 State 올바르게 사용

0
DevelopReact

Components and Props

React Official Document주요개념 : Components and Props 함수 컴포넌트와 클래스 컴포넌트 컴포넌트 렌더링 주의: 컴포넌트의 이름은 항상 대문자로 시작 컴포넌트를 이용한 렌더링 예시 컴포넌트 합성(구성) 컴포넌트 추출(분리) props는 읽기 전용 React Official Document주요개념#3. Comp

0
DevelopReact

엘리먼트(요소) 렌더링

React Official Document주요개념 : 엘리먼트(요소) 렌더링 React 엘리먼트(요소)란? DOM에 요소 렌더링하기 렌더링 된 요소 업데이트하기 React는 변경된 부분만 업데이트 한다. React Official Document주요개념#2. 엘리먼트(요소) 렌더링React 엘리먼트(요소)란? 1const element = &l