본문 바로가기
Programming Step/React JS10
React Hook react hook의 지원은 클래스보다 함수를 선호하는 사람에게 좋은 일이다. 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 훅을 사용할 수 있다. 그렇기에 훅이 당장 필요하지 않다면 사용할 필요는 없다. 이전 버전과 100퍼센트 호환성을 가지고 있다. useState useState는 state를 함수 컴포넌트 안에서 사용하게 해준다. 1 2 3 4 5 6 7 8 9 10 11 12 13 class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } import React, { useState } from 'react'; function Example() { // .. 2021. 6. 20.
REACT 공식 문서 정리 - 9. 리스트와 Key 9. 리스트와 Key 9.1 map()의 정의 먼저 Javascript에서 리스트를 어떻게 변환 하는지 살펴보자. 아래는 map() 함수를 이용하여 numbers 배열의 값을 두 배로 만든 후 map()에서 반환하는 새 배열 doubled 변수에 할당하고 로그를 확인하는 코드이다. 1 2 3 4 const numbers = [1, 2, 3, 4, 5]; // 배열 생성 const doubled = numbers.map((number) => number * 2); // 배열 횟수만큼 콜백 함수를 호출해서 돌리고 결과를 배열로 반환함. console.log(doubled); // 출력 결과는 [2, 4, 6, 8, 10] cs map()은 배열의 각 요소에 대해 제공된 callback 함수를 순서대로 호출하.. 2021. 6. 20.
REACT 공식 문서 정리 - 8. 조건부 렌더링 8. 조건부 렌더링 8.1 조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 어플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 할 수 있다. 예시는 아래와 같다. props.isLoggedIn 에 따라서 다른 인사말을 렌더링 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function UserGreeting(props) { // 사용자에게 인사 return Welcome back!; } function GuestGreeting(props) { // 게스트에게 인사 return Please sign up.; } function Greeting(props) { const isLoggedIn .. 2021. 6. 20.
REACT 공식 문서 정리 - 7. 이벤트 처리하기 7. 이벤트 처리하기 7.1 이벤트 처리방식의 차이 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 비슷하며, 차이는 다음과 같다. React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. 1 2 3 // 버튼이 눌렸을 때 해당 함수 작동 Activate Lasers Colored by Color Scripter cs 1 2 3 // 버튼이 눌렸을 때 해당 함수 작동 Activate Lasers Colored by Color Scripter cs React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 한.. 2021. 6. 20.
REACT 공식 문서 정리 - 6. State 와 생명주기 6. State 와 생명주기 6.1 State의 정의 State는 React Component Class의 instance이다. Component의 동작을 제어하는 관측 할 수있는 속성 집합의 개체로 정의 된다. Component의 State는 Lifetime에 따라 변경될 수 있는 정보를 보유한 객체이다. 6.2 Props와 State의 차이. Props는 변하지 않는 속성을 가지고 있다. State는 시간이 지남에 따라 변경 될 수 있는 데이터를 가지고 변경 후 동작을 제어하는데 사용되는 관찰 가능한 개체이다. State는 컴포넌트 안에서만 사용할 수 있는 반면 Props는 제한이 없다. 6.3 생명주기(Life Cycle) 클래스 컴포넌트와 함수형 컴포넌트의 생명주기는 동일하게 동작한다. 6.3.1.. 2021. 6. 20.
REACT 공식 문서 정리 - 5. Component 와 Props 5. Component 와 Props 5.1 Component의 정의 컴포넌트의 제작 방법은 함수형과 클래스형으로 나누어져 있다. 컴포넌트를 쓰는 이유중 하나는 재사용을 편하게 하기 위함이다. App 최상위 컴포넌트 아래에 여러 사용자 정의 컴포넌트가 존재한다. 클래스형 보다는 함수형이 간결하게 사용할 수 있다. 5.2 props의 정의 React가 JSX 속성 또는 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 Props라 한다. 주의사항 : props는 읽기 전용이므로 수정 X ex) 함수 컴포넌트와 클래스 컴포넌트 예시 1 2 3 4 5 6 7 8 9 10 // 함수형 function Welcome(props) { return Hello, {props.name}; } // 클래스형 cla.. 2021. 6. 20.
REACT 공식 문서 정리 - 4. Element 렌더링 4. Element 렌더링 4.1 element의 정의 Element는 컴포넌트의 구성요소이며 React 앱의 가장 작은 단위이다. 특정 부분만 리렌더링 할 수 있기에 효율적인 자원관리를 할 수있다. 1 2 3 4 5 6 7 8 9 function Welcome(props) { return Hello, {props.name}; } const element = ; ReactDOM.render( element, document.getElementById('root') ); cs 위의 예시는 다음과 같은 일이 일어난다. 엘리먼트로 ReactDOM.render()를 호출한다. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출한다. Welcome 컴포넌트는 결과적으로 Hel.. 2021. 6. 20.
REACT 공식 문서 정리 1~3 1. React를 배우는 이유 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화 한다. 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있다. 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React가 제작됨. 2. React를 배우기 전 기본 조건 HTML 및 CSS 에 대한 기본 지식. Javascript 및 프로그램에 대한 기본 지식 DOM 에 대한 기본적인 이해. ES6 구문 및 기능 Node.js 및 npm 설치 3. JSX 표현식 JavaScript를 확장한 문법이며 UI를 제작에 React와 함께 사용할 것을 권장한다. JavaScript의 모든 기능이 포함되어 있다. JSX는 HTML문법을 사용해서 View를 구성할 수 있게 도와주.. 2021. 6. 20.
REACT 공식 문서 정리 REACT 공식 문서 정리 목차 1. React를 배우는 이유 2. React를 배우기 전 기본 조건 3. JSX 표현식 1. React를 배우는 이유 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화 한다. 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있다. 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React가 제작됨. 2. React를 배우기 전 기본 조건 HTML 및 CSS 에 대한 기본 지식. Javascript 및 프로그램에 대한 기본 지식 DOM 에 대한 기본적인 이해. ES6 구문 및 기능 Node.js 및 npm 설치 3. JSX 표현식 JavaScript를 확장한 문법이며 UI를 제작에 React와 함께 사용할 것을 권장.. 2021. 6. 20.
React import할때 {} 유무 아래 두 방식의 차이는 import 방식의 차이이다. import React from 'react' class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 위의 경우 React 객체 안에있는 Component를 React.Component 형식으로 사용했지만. import React, { Commponent } from 'react'class Welcome extends Component { render() { return Hello, {this.props.name}; } } 아래의 경우 Component 로 바로 가져와 쓸수있다. MDN 문서의 예시는 다음과 같다. import defaultExport.. 2020. 1. 23.

티스토리툴바