230213 React 기초 (Hook)

기초 문법

JSX : 컴포넌트

• 리액트로 만들어진 앱을 이루는 최소한의 단위

• 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.

• 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.

• 컴포넌트 이름은 항상 대문자로 시작하도록 한다.
  (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

• “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

• props와 state 등의 특징들은 따로 정리 하도록 한다.

class사용. 컴포넌트

class Subject extends Component{
  render(){
    return(
      <header>
      <h1>머리글 : </h1>
    </header>
    )
  }
} 

function사용. 컴포넌트

let a =10;
const b = 20;

function Welcome(props){
    return(
      <article>
        {props.who} 글 기사 내용
        {a+b}
        <br/>
        {a === 10? 'a는 10이다.' : '틀림'}
      </article>
    )
} 

외부파일 컴포넌트 사용

개별 js파일을 생성한다.

import React, {Component} from "react";
class Navdata extends Component{
    render(){
        return(
            <ul>
                <li><a href="https://www.naver.com">naver</a></li>
                <li><a href="https://www.korea.com">korea</a></li>
            </ul>
        )
    }
}
export default Navdata; //중요 

메인에 컴포넌트 장착: 클래스로 표현해본 App함수

import Navdata from "./mydir/Navdata"; //외부 컴포 로드

class App extends React.Component{
  render(){
    return(
      <div>
        안녕<br/>
        <Subject></Subject> //클래스comp
        <Welcome who="홍길동"></Welcome> //함수comp
        <Navdata></Navdata>  //외부comp
      </div>
    )
  }
}
export default Navdata; 

• 클래스 사용시 render()메소드 사용은 필수이다.
• JSX에서의 변수표현은 중괄호로 감싸야함.
• if문을 사용할 수 없기 때문에 삼항연산자를 사용해야한다.
• 매개변수와 비슷한것을 사용함. 아래 App함수에서 어떻게 사용했는지 확인
• return 할땐 꼭 하나의 태그가 리턴되어야 한다.

---

React Hook

[ Hook의 등장 ]
클래스 없이 함수 컴포넌트로 react state와 life cycle기능을 사용 할 수 있다.
상태가 변하면 re-randering.

두가지 케이스로 카운팅 앱을 만들어 봤다.

class 사용으로 Hook을 사용하지 않았을때

import { Component } from 'react';
import './App.css';
class App extends Component {
  //key : value
  state = {
    count:0
  };
  //setter
  countUpdate(cnt){
    this.setState({count:cnt});
  }
  render(){
    const {count} = this.state;

    return (
      <div className="App">
        number : {count} &nbsp;
        <button onClick={()=>{
          this.countUpdate(count+1);
        }}>증가</button>
      </div>
    );
  }
}
export default App; 

• key:value 형태로 count변수를 선언. countUpdate() 로 들어온 증가값을 this.count에 저장한다. (setter)
• JSX에서 button onClick에 콜백(화살표)함수로 구현한 메소드를 넣었다.

function 사용으로 Hook을 사용

import { useState } from "react";

// const HookTest = () =>{ 대체가능
function HookTest(){
    //Hook(useState) / count초기치 0
    const [count,setCount] = useState(0); 
    return(
        <div>
            number : {count} &nbsp;
            <button onClick={()=>{
                setCount(count+1);
            }}></button>
        </div>
    );
}

export default HookTest; 

• const [count,setCount] = useState(0); 이 Hook의 핵심.
  [변수값과 메소드 명] = useState(변수초기값) 의 형태로 사용한다
• export와 해당 js의 이름을 통일할 필요는 없지만,
  export-import. import-JSX컴포넌트 태그는 꼭 같아야한다.

더 나은 코드

선언과 동시에 export 할 수도 있다.

import { useState } from "react";

// const HookTest = () =>{
export default function HookTest2() {
  //Hook(useState) / count초기치 0
  const [item, setItem] = useState(0);
  const incrementItem = () => setItem(item+1);
  const decrementItem = () => setItem(item-1);
  return (
    <div>
      number(function type) : {item} &nbsp;
      <button onClick={incrementItem}>증가</button>
      <button onClick={decrementItem}>감소</button>
    </div>
  );
} 

---

css 적용

class지정은 className="" 으로 대체하여 사용한다.

css

<style>
.black_bar{
  background-color: black;
  width: 100%;
  color: white;
  padding: 5px;
  display: flex;
}
</style>

jsx

<script>
let st = {color:'blue'};

return (
    <div>
      <h1 className="black_bar">리액트의 이해</h1>
      <h3 style={{ color: "red" }}>직접 적용</h3>
      <h3 style={st}>클래스 사용</h3>
      <div>
      )
</script>