리액트를 다시 공부하려고 하니 잊어버린게 너무 많아서 공식문서를 토대로 다시 복습하려고 한다.

리액트 맛보기

공식문서대로 리액트 차근차근 익혀보기

1. JSX
   
   Javascript를 확장한 문법이며, UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장
   
   JSX는 React "엘리먼트(element)"를 생성한다.
   
   JSX는 UI로직과 렌더링 로직의 해결책으로 나온 것

• JSX에 표현식 포함하기

const name = 'Josh perez'
const element = <h1>Hello,{name}</h1>

ReactDOM.render(
    element,
    document.getElementById('root')
)

JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있으며, JSX도 표현식이기 때문에 컴파일이 끝나면 JSX표현식이 Javascript 객체로 인식된다.

즉 JSX를 if문이나 for 반복문 안에 사용하고 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다.

function getGreeting(user){
    if(user){
        return <h1> Hello,{formatName(user)}!</h1>
    }
    return <h1>hello starnger</h1>
}

• JSX 속성 정의
  
  속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있고, 중괄호를 사용해 어트리뷰트에 Javscript 표현식을 삽입할 수도 있다.
  
  JSX는 HTML보다는 Javascript에 가깝기 때문에 React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용

const element = <div tabIndex="0"></div>
const element = <img src={user.avatarUrl}></img>

• JSX로 자식 정의
  
  태그가 비어있다면 XML 처럼 /> 를 이용해 바로 닫아주어야 한다.
  
  JSX태그는 자식을 포함할 수 있다.

const element = <img src={user.avatarUrl} />

const greeting = (
    <div>
        <h1>hello</h1>
        <h2>goot to see you</h2>
    </div>
)

2. Props
   
   컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
   
   props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
   
   컴포넌트를 정의하는 간단한 방법은 Javascript 함수를 작성하는 것.

function Welcome(props){
    return <h1>Hello, {props.name}</h1>
}

const element = <Welcome name="Sara" />
React.DOM.render(
    element,
    document.getElementById('root')
)

위 예시에서는 다음과 같은 순서로 일이 일어난다.
1. 엘리먼트로 React.DOM.render()를 호출
2. React는 {name:'Sara'}를 propr로 하여 Welcome 컴포넌트를 호출
3. Welcome 컴포넌트는 결과적으로 Hello, Sara 엘리먼트를 반환
4. React DOM은 Hello, Sara 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트 함.

• 컴포넌트 추출
  
  재사용성을 높이기 위해서 사용

// 코드도 길고, 재사용성이 어려운 코드
import React from 'react'

function formatDate(date) {
    return date.toLocaleDateString();
  }
  function Comment(props) {
    return (
      <div className="Comment">
        <div className="UserInfo">
          <img className="Avatar"
               src={props.author.avatarUrl}
               alt={props.author.name} />
          <div className="UserInfo-name">
            {props.author.name}
          </div>
        </div>
        <div className="Comment-text">
          {props.text}
        </div>
        <div className="Comment-date">
          {formatDate(props.date)}
        </div>
      </div>
    );
  }
  const comment = {
    date: new Date(),
    text: 'I hope you enjoy learning React!',
    author: {
      name: 'Hello Kitty',
      avatarUrl: 'http://placekitten.com/g/64/64'
    }
  };
export default function Extraction() {
  return (
    <div>
        <Comment
      date={comment.date}
      text={comment.text}
      author={comment.author} />
    </div>
  )
}

위 코드를 재사용성이 좋게 바꿔보면 아래와 같이 바꿀 수 있다.

import React from 'react'

function formatDate(date) {
    return date.toLocaleDateString();
}
function Avatar(props){
    return(
        <img className="Avatar"
                    src={props.user.avatarUrl}
                    alt={props.user.name} />
    )
}
function UserInfo(props){
    return (
        <div className="UserInfo">
                <Avatar user={props.user}/>
                <div className="UserInfo-name">
                    {props.user.name}
                </div>
            </div>
    )
}

function Comment(props) {
    return (
        <div className="Comment">
            <UserInfo user={props.author} />
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="Comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}
const comment = {
    date: new Date(),
    text: 'I hope you enjoy learning React!',
    author: {
        name: 'Hello Kitty',
        avatarUrl: 'http://placekitten.com/g/64/64'
    }
};
export default function Extraction() {
    return (
        <div>
            <Comment
                date={comment.date}
                text={comment.text}
                author={comment.author} />
        </div>
    )
}