4. React.js 기초

(1) Why React.js

리액트를 쓰는 이유?

• 중복되는 코드가 많을 때 여러번 수정해 유지보수가 어려운 상황을 '산탄총 수술'이라고 한다.
• react는 componenet기반의 UI 라이브러리 이므로 재사용 코드들을 component로 만들어 사용하면 유지보수가 용이해진다.
• 명령형 프로그래밍 방식(절차를 하나하나 나열해야 한다)이 아닌 선언형 프로그래밍 방식(react)을 따른다.
• Virtual DOM : 잦은 업데이트시 DOM을 업데이트 시키지 않고 Virtual DOM에 미리 업데이트 해놓고 나중에 업데이트 함으로 연산을 줄인다.

(2) Create React App

• boiler plate : 서비스를 개발 가능한 react를 찍어내는 틀
• $ npm create-react-app 프로젝트명
• npm start : 서버 실행

(3) JSX

• react의 component를 만드는데 용이한 문법이다.
• jsx에선 닫는 태그가 반드시 필요하다.
• jsx는 하나의 최상위 태그가 반드시 필요하다.
• <react.pregment>로 최상위 태그 없이 작성 가능

(4) state

• 동적인 요소들을 표현하기에 적합하다.

// Counter.js
// +,- 버튼을 누를때마다 증감되는 코드 작성
import React,{useState} from 'react'

const Counter = () => {

  const [count, setCount] = useState(0)

  const onIncrease = () => {
    setCount(count + 1)
  }

  const onDecrease = () => {
    setCount(count - 1)
  }

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  )
}

Counter.defaultProps = {
    initialValue: 0 // 전달받지 못한 data의 default값 설정 가능
}

export default Counter

(5) Props

• component에 data를 전달하는 기본적이고 효율적인 방법이다.
• 부모요소에서 전달할 data를 만들고 자식에게 전달한다.
• 자식요소는 props의 형태로 data를 전달받는다.

// OddEvenResult.js
// 동적인자를 받아 짝수인지 홀수인지 return 해준다.
const OddEvenResult = ({ count }) => {
  return <>{count % 2 === 0 ? "짝수" : "홀수"}</>
}

export default OddEvenResult

// container.js
// 코드 전체를 감싸는 style 지정
const Container = ({ children }) => {
  return (
    <div style={{margin:20, padding:20, border:"1px solid gray"}}>
      {children}  
    </div>
  )
}

export default Container