React 기초

사용자 yukii 2019. 11. 17. 02:00

1. JSX

: React로 HTML을 쓰는 방법

1. Nested Element

컴포넌트에서 여러 element를 렌더링 할 때, 꼭 container element 안에 포함시켜야 한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 render() { return ( < div > < h1 > Hi < / h1 > < h2 > Error is gone. < / h2 > < / div > ); } Colored by Color Scripter cs

2. JavaScript Expression

JSX에서 JavaScript를 표현하는 방법은 간단하다. 그냥 { } 로 wrapping하면 된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 render() { let text = "Hello React!" ; return ( < div > {text} < / div > ); } cs

If Else 문은 JSX에서 사용불가하므로,

이에 대한 대안은 tenary expression(condition ? true : false)이다.

1 2 3 4 5 6 7 8 9 render() { return ( < p > { 1 = = 1 ? 'True' : 'False' } < / p > ); } Colored by Color Scripter cs

3. Inline Style

JSX 안에서 style을 설정 할때는, string 형식을 사용하지 않고

key가 camelCase인 객체가 사용된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 render() { let style = { color: 'aqua' , backgroundColor: 'black' }; return ( < div style = {style} > React < / div > ); } Colored by Color Scripter cs

JSX 안에서 class를 설정 할때는 class= 가 아닌 className= 을 사용한다.

1 2 3 4 5 6 7 8 9 10 11 render() { return ( < div className = "box" > React < / div > ); } Colored by Color Scripter cs

4. Comments

JSX 안에서 주석을 작성 할 때는

{ /* ... */ } 형식으로 작성한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 render() { return ( < div > { /* This is how you comment */ } { /* Multi-line Testing */ } < / div > ); } Colored by Color Scripter cs

📌 반드시 container element 안에 주석이 작성되어야 한다.

2. props

: 컴포넌트 내부의 Immutable Data

JSX 내부에 { this.props.propsName } 형식으로 작성

📌 Data flow width Props

정보를 메인에 다 집어넣고, 그걸 각각 컴포넌트에 props를 이용해 출력

큰 컴포넌트가 전체 정보를 갖고있고, 각기 칠드런에게 정보를 전달함. 이를 이용해 강력한 UI를 구축

한개의 데이터 소스를 가지고 각 컴포넌트별로 출력만 하면 되니까!

📌 Validating Props with Prop Types

yarn add prop-types

리액트 안에 proptypes가 있었는데, 업데이트 후 두개가 나뉘었기 때문에 따로따로 install 해야함

기본 값 설정

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Component.defaultProps = { ... } class App extends React.Component { render(){ return ( < div > {this.props.value} < / div > ); } }; App.defaultProps = { value: 0 }; Colored by Color Scripter cs

Type 검증

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 Component.propTypes = { ... } class App extends React.Component { render(){ return ( < div > {this.props.value} {this.props.secondValue} {this.props.thirdValue} < / div > ); } }; App.propTypes = { value: React.PropTypes.string, secondValue: React.PropTypes.number, thirdValue: React.PropTypes.any.isRequired }; Colored by Color Scripter cs

3. state

: function과 같이 react 컴포넌트 안에 있는 오브젝트

컴포넌트 안에 state가 바뀔 때 마다, render 발생

JSX 내부에 { this.state.stateName } 형식으로 작성

초기값 설정이 필수, 생성자(constructor) 에서 this.state = { } 으로 설정

렌더링 된 다음엔, this.state = 절대 사용하지 말 것

값을 수정할 때는 this.setState({ .. })

4. map( ) 메소드

: 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 배열을 생성

📌 Lists with .map

우리가 제공한 기능/명령의 결과값을 array로 만듦

map()을 하면 새로운 array가 생기는데, 다른 array의 엘리먼트를 포함한 값(내가 원하는 기능과 함께)

array를 가져다가, 맵핑을 해서(map) 새로운 array를 만듦

👉 array 하나를 잡고 맵핑해서 하나의 컴포넌트를 만드는 것. (해당 array의 엘리먼트를 토대로 한 컴포넌트)

컴포넌트 매핑 (Component Mapping)

/* ES5 Syntax */

1 2 3 4 5 6 7 8 9 10 11 var numbers = [ 1 , 2 , 3 , 4 , 5 ]; var processed = numbers.map( function (num) { retrun num * num; }); processed [ 1 , 4 , 9 , 16 , 25 ] cs

/* ES6 Syntax */

1 2 3 4 5 6 7 let numbers = [ 1 , 2 , 3 , 4 , 5 ]; let result = numbers.map((num) = > { return num * num; }); Colored by Color Scripter cs

arr.map(callback, [thisArg])

callback

: 새로운 배열의 요소를 생성하는 함수로서, 다음 세가지 인수를 가진다.

currentValue -현재 처리되고 있는 요소

index -현재 처리되고 있는 요소의 index 값

array -메소드가 불려진 배열

thisArg (선택항목)

: callback 함수 내부에서 사용할 this 값을 설정

ex)

/* ES5 Syntax */

1 2 3 4 5 6 7 8 9 var mapToComponents = function mapToComponents(data) { return data.map( function (contact, i) { return React.createElement(ContactInfo, { contact: contact, key: i }); }); }; Colored by Color Scripter cs

/* ES6 Syntax */

1 2 3 4 5 6 7 8 9 10 11 12 13 render() { const mapToComponents = (data) = > { return data.map((contact, i) = > { return ( < ContactInfo contact = {contact} key = {i} / > ) }) }; Colored by Color Scripter cs

🔮

react = UI(User Interface) 라이브러리

reactDOM(Document Object Model) = 라이브러리를 웹사이트에 출력해줌, 1개의 컴포넌트를 출력(render)

reactNative = 리액트를 모바일 앱에 올릴 때 사용

JSX = 리액트로 작성하는 html, 명령을 실행시키려면 괄호를 꼭 쳐야함

컴포넌트 생성> 랜더 > 리턴> html 내용 >> 그리고 이걸 브라우저에서 확인

import react > class> RENDER (필수 기능)

* return 꼭 써주기

모든 컴포넌트는 무조건 RENDER 해야 하고, RETURN 해야함!

from http://jung-hyun.tistory.com/6 by ccl(A) rewrite - 2020-03-06 13:54:34