블로그 내용은
Programming with Mosh React Tutorial for Beginners [React js]
을 공부하는 과정에서 작성되었습니다.
목표
강의를 따라가며 위와 같은 카트를 만들겠습니다.
Your First React Componetnt
import React, { Component} from 'react'
위 코드는 리액트를 임포트 시킵니다. 리액트를 임프트 시킴으로서 React.creamtelElement()을 사용할 수 있고 jsx를 사용할 수 있게됩니다. Component는 앞으로 우리가 사용할 super의 부모 클래스입니다. (React.component)
import ReactDOM from 'react-dom'
render()은 이렇게 임포트해서 사용할 수 있습니다. ReactDom은 리액트를 웹사이트에 출력(render)하는 걸 도와주는 모델입니다.
ReactDOM.render(element, documnet.getElmentById('root'))
첫번째 아규먼트 인자로 화면에 띄우고자 하는것 두번째 인자로는 DOM요소를 적습니다. 기본설정을 보면 엘리먼트를 HTML에 연결해서 화면을 생성합니다.
render()은 virtual Dom은 스테이트가 변경할때마다 old Dom의 엘리먼트와 비교하여 변경을 알아채고 즉시 반영합니다.
React.createElement()
createElement()는 인자로 주어지는 타입에 따라 creact엘리먼트를 생성 및 반환합니다. jsx 문법으로 작성된 코드는 reateElement()을 자동으로 호출하기 때문에 크게 신경쓰지 않아도 됩니다. 이점은 jsx를 사용하는 장점 중에 하나입니다.
그러나 우리가 신경써야할 부분이 있습니다.
React.createElement( type, [props], [...children] )
createElement()의 기초 문법입니다. type은 문자열이나 컴포넌트 등등 다양한 인자가 올 수 있지만 오직 하나의 인자만 받습니다. 그래서 통상 div나 fragment를 사용해서 해결합니다.
<React.Fragment> <h1>Hello World</h1> <button>Increment</button> </React.Fragment>
<React.Fragment>로 변경하던가
import React, { Component, Fragment } from 'react';
Fragment를 임포트 시킴으로써
<Fragment></Fragment>형태로 사용할 수 있다.
Embedding Expressions
return()을 한번보자
return //
return( //)
리액트에서는 retrun형태가 길어져서 아래처럼 개행된 형태가 일반적입니다.개행될 경우 ()로 묶는 것이 기본입니다.
그리고 리액트 안에서 자바스크립트는 모두 {}로 묶는 것이 jsx표현식입니다.
jsx 표현식은 자바스크립트에서 객체로 인식되어서 함수에 인자로 넘길수도 있고 리턴시킬 때도 jsx표현식으로 사용할 수 있습니다.
styles = { fontSize: 10, fontWeight: "bold" };
jsx가 px를 붙혀서 "10px"로 만들기 때문에 생략가능하다
Rendering Lists
React에서 키는 각각의 element들이 변경되었는지 혹은 추가, 삭제 되었는지 확인하기 위해 사용됩니다. 그렇기 때문에 리스트 각각의 요소를 구별할 수 있도록 유니크 해야 하고, 그 할당된 key값은 변하지 않는 값을 할당해 주는것이 중요합니다.
state = { count : 1, tags: ["tag1", "tag2", "tag3"] };
state에 tags를 추가합시다. 가장 좋은 방법은 리스트 안에 있는 아이템들의 ID를 key로 사용하는 것입니다.
<ul>{this.state.tags.map(tag => <li>{tag}</li>)}</ul>
위와 같이 코딩한다면 Key가 없기 때문에 경고를 보냅니다. 그렇기 때문에 항상 Key를 사용합시다.
<ul>{this.state.tags.map(tag => <li key={tag} >{tag}</li>)}</ul>
리스트 안의 아이템들이 ID가 없다면 차선책으로 리스트의 위치(index)를 key로 사용하는 할 수 있습니다. 인덱스를 Key로 사용하는 것은 리스트가 추가되거나, 삭제될 경우 리스트의 순서가 변경 될 수 있기 때문에 지양하는 방법입니다.위에서는 tags 자체가 고유한 값임으로 key 넣어도 무리가 없을듯 합니다.
