React. 기본 개념 및 구조

React. 기본 개념 및 구조

⊙ 컴포넌트란 ?

- 기능을 단위별로 캡슐화하는 리액트의 기본 단위
- 사용자가 보는 뷰는 컴포넌트의 조합체
- 클래스 or 함수 기반으로 작성한다.

<Modal><Modal/>
// 위 모달 컴포넌트는 아래 함수 리턴 내용
function Modal(){
    return(
        <div>
            <h1>Modal<h1/>
        <div/>
    )
}

⊙ state란 ?

- 각 컴포넌트가 가지고 있는 개별적인 객체 값
- 변수 대신 쓰는 데이터 저장공간
- useState()를 이용해 만들어야함
- 문자, 숫자, 배열, 객체 저장 가능
- 웹이 App처럼 동작하게 만들 수 있다. 
  (state는 변경되면 HTML이 자동으로 재렌더링 된다.)

// 생성
state = {}
// 지정
this.setState({
    name: e.target.value
});
// 불러오기
{this.state.name}

// array value change
let [제목, 제목변경] = useState(['a','b','c']);
function nameChg(){
    // 
    let newArray = [...제목];
    newArray[0] = 'aa';
    제목변경(newArray);
}

⊙ props란 ?

- properties의 약어
- 상위 컴포넌트가 넘겨주는 매개변수
- 변동되지 않는 데이터를 다룰 때 사용한다.

// 클래스 컴포넌트 예시
// 하위 컴포넌트
class Children extends React.Component { 
  render() {
    return (
      <div>
        // 상위 컴포넌트가 넘겨준 props인 name사용
        <h1>{this.props.name}</h1>
        // 상위 컴포넌트가 넘겨준 props.children 사용
        <div>{this.props.children}</div>
      </div>
    );
  }
}
// 상위 컴포넌트
class App extends React.Component { 
  render() {
    return (
      // this.props.name의 값 : 123
      // this.props.children의 값 : 456
      <Children name="123">456</Children>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById("root"));

//-------------------------------------------------------

// 함수 컴포넌트 예시
// 상위 컴포넌트
function App() {
  return (
  	<Test data={data} name={name}/>
  );
}
// 하위 컴포넌트
function Test(props){
  return(
    props.data.map(function(obj, i){
      return(
        <div>
        </div>
      )
    })
    <div>
    	{props.name}
    <div/>
  )
}

⊙ 기본 구조

/* eslint-disable */
// 터미널에 뜨는 warning 생략

// 클래스형
import React, { Component } from 'react';

class App extends Component {
  render() {
    // 변수 선언
    const name = 'react';
    // view
    return (
      {/* 주석 */}
      <div>
        hello {name}!
      </div>
    );
  }
}

export default App;

//-------------------------------------------------------

// 함수형
import React, { useState } from 'react';

function App(){
  let arg = '';
  return (
    <div>
        {arg}
    </div>
  )
}