[React] 컴포넌트, 분기와 반복, 상태와 이벤트 바인딩

특징 

1. 바로 반응

2. mvc - 컴포넌트의 조합으로 view를 구성한다.

3. virtual Dom : 필요한 부분만 랜더링한다.

 

어떻게 공부하나?

처음엔 컴포넌트만 열심히 생각해보자

컴포넌트의 가장 큰 장점은 쉽게 코드를 버릴 수 있다는 점이다.

 

컴포넌트

트리구조로 이루어져 있다. 

단방향

 

propType으로 가져오는 props들의 타입정해줄수 있음

props 로 컴포넌트에 값을 넣어줄 수 도 있지만 ,

비구조할당으로 component에 props 대신 { 변수 }으로 값을 묶어주고 사용할 수도 있다.

 

분기와 반복

1. 컴포넌트는 JSX를 반환하는 함수이다.

2. 함수 내에서 JSX를 처리하는 과정에서 분기왑 반복을 사용할 수 있습니다.

3. JSX 내에서 if와 for와 같은 문법을 사용하기 어렵기 때문에 편의를 위해서

표현식인 삼항연산자와 map, filter 등을 사용한다.

 

분기

const [visible, setVisible] = useState(false)

return (
    <div className="App">
      <button onClick={() => setVisible(!visible)}>Toggle</button>
      {visible && 
      (<h1>논리곱 연산자를 통해 쉽게 jsx 렌더링 여부를 결정할 수 있습니다.</h1>)}
       <Board articles={articles}/>
    </div>
      );
}

export default App;

jsx부분에 {}표현식안에 &&나 삼항연산자 ?을 써서 분기문을 쓴다.

분기문은 컴포넌트에도 적용가능하다.

 

반복

const Board = ({articles}) => {
    return (
        <div>
            <h1>Board</h1>

            <ul>
               {articles.map(articles => (
                <li key={articles.id}>
                    {articles.id} || {articles.title} |{articles.author}
                </li>
               ))}
            </ul>
        </div>
    );
};

{}에 받아온 map을 통해서 반복해준다. { props.map( props =>(jsx와 {props}) ) }

jsx내에서 루프를 돌릴 때 반드시 상위 요소에 키를 넣어주어야 한다.

 

 

상태와 이벤트 바인딩

 

요구사항

1. Counter 컴포넌트 구현하기

2. 모든 Counter 컴포넌트의 합 구하기

 

무엇을 배울 것인가?

1. 컴포넌트에서 지역 상태 관리하는 법 useState

2. 컴포넌트에 이벤트 바인딩하기 onclick로 해당 함수 실행 

3. 부모 컴포넌트에게 메시지 전달하기 props

 

counter 컴포넌트 기능

1. 증감하는 기능

2. 부모 컴포넌트에게 메시지를 전달하는 기능

 

usestate

const [count, setCount] = useState();

count는 변화할 상태 정의

setCount 변화한 상태를 적용 (업데이트) 이벤트가 발생함에 따라 값을 바꿔줄 함수

useState : 훅이라 부르고 함수내에 있는 상태를 관리할 수 있다.

 

import { useState } from "react";
import Proptypes from 'prop-types';

function Counter({ onIncrease, onDecrease }) {
    const [count, setCount] = useState(0);

    const handleIncrease =() => {
        setCount(count + 1);
        if (onIncrease) onIncrease(count +1);
    };
    const handleDecrease =() => {
        setCount(count - 1);
        if (onDecrease) onDecrease(count - 1);
    };

    return (
        <div>
            <span style={{fontSize: 40}}>{count}</span>
            <br/>
            <button onClick={handleIncrease}>+</button>
            <button onClick={handleDecrease}>-</button>
        </div>
    )
}

Counter.prototype = {
    onIncrease: Proptypes.func,
    onDecrease: Proptypes.func
}

export default Counter;

counter.js

 

import './App.css';
import { useState } from "react";
import Counter from './components/Counter';
function App() {
  const [totalCount, setTotalCount] =useState(0);

  return (

    <div className="App">
      TotalCount : {totalCount}
      <Counter onIncrease={(count) => {setTotalCount(totalCount +1);}}
      onDecrease={(count) => {setTotalCount(totalCount -1);}}
        />
        <Counter onIncrease={(count) => {setTotalCount(totalCount +1);}}
      onDecrease={(count) => {setTotalCount(totalCount -1);}}
        />
        <Counter onIncrease={(count) => {setTotalCount(totalCount +1);}}
      onDecrease={(count) => {setTotalCount(totalCount -1);}}
        />
    </div>
   
  );
}

export default App;

app.js