2022-01-13 TIL

react 공부를 제대로 해볼려고 책을 살까....했는데
일단 공식문서로 공부하고 자습서부터 따라 해보려고 한다.
리액트 책 두께가 거의 전공책이던데...
지금 사면 안 읽을 확률 15000%...😂 나는 나를 잘 알지 흐흐

공식문서는 https://ko.reactjs.org/ 여기서 볼 수 있다.

✨ 참고 https://www.taniarascia.com/getting-started-with-react/

Create React App

npx create-react-app 생성할 폴더 이름

cd 생성한 폴더 이름

npm start

React Developer Tools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

JSX: JavaScript + XML

React coded에서 사용하는 것은 HTML처럼 보이지만,
JavaScript XML의 약자인 JSX 입니다.

React를 사용하는데 있어서 반드시 JSX를 사용할 필요는 없습니다.

{*/ JSX를 사용한 코드 /*}

const heading = <h1 className="site-heading">Hello, React</h1>

// JSX를 사용하지 않은 코드

const heading = React.createElement('h1', 
	{className: 'site-heading'}, 'Hello, React!')

JSX의 특징

1) class 대신 className을 사용합니다.
2) camelCase를 사용합니다. ex) onClick
3) Self-closing tags는 /로 끝나야 합니다. ex) <img />

Components

: 컴포넌트는 다른 컴포넌트에 중첩될 수 있고, Simple
  Components와 Class Components를 함께 사용할 수 도 있다.

Class Components

: class 키워드로 구성요소를 만듦

class ClassComponent extends Component {
  render() {
    return <div>Example</div>
  }
}

Simple Components

: class 키워드를 사용하지않고 함수로 구성요소를 만듦

const SimpleComponent = () => {
  return <div>Example</div>
}

Props

import React, {Component} from 'react'

const TableHeader = () => {
    return (
      <thead>
        <tr>
          <th>Name</th>
          <th>Job</th>
        </tr>
      </thead>
    )
  }

  const TableBody = (props) => {
    const rows = props.characterData.map((row, index) => {
      return (
        <tr key={index}>
          <td>{row.name}</td>
          <td>{row.job}</td>
        </tr>
      )
    })
  
    return <tbody>{rows}</tbody>
  }

  class Table extends Component {
    render() {
      const {characterData} = this.props
  
      return (
        <table>
          <TableHeader />
          <TableBody characterData={characterData} />
        </table>
      )
    }
  }
  
  export default Table;

테이블에서, props에 접근하기 위해 this.props를 사용한다.
여기에서는 characterData라는 단 하나의 props만 전달했으므로,
이 데이터 검색을 위해 this.props.characterData를 사용한다.

State

props로는 일방향 통신만이 가능했다.

state는 데이터베이스에 추가될 필요없이 저장되고 수정되어야하는 데이터들을 컴포넌트에 업데이트 할 수 있게 해준다.
ex) 쇼핑몰의 장바구니 등

Table에서 character을 제거하는 기능을 구현하기위해 RemoveCharacter 메서드를 추가한다.

state를 검색하기위해 this.state.characters를 사용한다.
state를 업데이트하기위해 built-in method인 this.setState()를 사용한다.

배열을 수정하기위해this.setState()를 반드시 사용해야한다.

filter는 새로운 배열을 생성하며,(변형X)
JS에서 배열 수정을 위해 선호되는 메서드이다.