React, useEffect, useRef, props

React란?

1. React 소개

  리액트는 라이브러리이다. 리액트를 구성하는 기능들은 최소한의 노력으로 최대의 효율을 내기 위함이다.

2. React 특징

• Reactive Programming이다.
  • React는 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산이 수행된다.
• MVC에서 리액트는 V만 관리한다. 여기서 View는 컴포넌트이다. 컴포넌트는 재사용이 가능한 독립적인 객체이며 런타임 시점에 사용된다.
  • 컴포넌트는 트리 구조로 나타낼 수 있다.
  • 컴포넌트 조합으로 View를 구성한다.
• Virtual DOM이다.
  • 필요한 부분만 한 번에 렌더링한다.
  • 성능보다는 개발을 쉽게 하기 위해 사용되었다.

2. create-react-app, JSX

2.1 create-react-app

  새로운 리액트 앱을 만들기 쉽게 도와준다.

npx create-react-app [app이름]

2.2 JSX

  자바스크립트에 XML을 추가하여 확장한 문법이다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장한다.

• 자바스크립트에서 이미 class가 예약어이기 때문에 HTML의 class부분에 className을 사용해야한다.
• 최상위가 하나여야 한다.
• 표현식이나 조건문도 넣을 수 있다. 중괄호 내부에 작성하면 된다.

3. 컴포넌트

  리액트의 컴포넌트는 함수이다. UI를 추상적으로 바라보고 공통점을 찾아 컴포넌트를 만들면 재사용할 수 있는 컴포넌트를 만들 수 있다. 컴포넌트에서 데이터는 단방향으로 전달된다.

4. Props

  props를 사용하여 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 넘겨줄 수 있다.

// props.size => 구조분해할당
function Button({ size = 30 }) {
    return (
        <button style={ width: size }></button>
    )
}

import Button from './Button.js'

function App() {
    return (
        ...
        <Button size={50} />
    )
}

4.1 children

props에 children을 사용하면 자식 컴포넌트 태그 내부의 내용이 children에 전달된다.

function Paragraph({ children }) {
    return (
        <p>{ children }</p>
    )
}

import Paragraph from './Paragraph.js'

function App() {
    return (
        ...
        <Paragraph>
            <code>App.js</code> is running.
        </Paragraph>
    )
}

---

분기와 반복

1. 분기

  상태 값이 true인지 false인지에 따라 요소를 보여줄지 말지를 나타낼 수 있다. 논리곱(&&)을 사용하거나 삼항연산자를 사용하면 된다.

2. 반복

  map이나 filter 등의 고차함수를 사용하여 요소를 반복해줄 수 있다. map을 사용할 때는 꼭 요소에 key 값을 넣어주어야 한다.

---

이벤트 바인딩, 리액트 훅

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

  useState()를 사용하여 지역 상태를 관리할 수 있다. 아래에서 count가 상태이고, setCount가 상태 값을 변경할 수 있는 함수를 나타낸다.

const [count, setCount] = useState(0)

2. 컴포넌트에 이벤트 바인딩하기

  이벤트를 처리할 함수를 만들어서 요소의 이벤트에 바인딩해주면 된다.

...

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

return (
    ...
    <button onClick={handleIncrease}>+</button>
)

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

  props를 통해 전달해줄 수 있다. 아래에서는 props로 함수를 넘겨주는 것을 확인해보자.

function Counter({ onChange }) {

    const handleIncrease = () => {
        setCount(count + 1)
        if (onChange) onChange(count + 1)
    }

    return (
        ...
        <button onClick={handleIncrease}>+</button>
    )
}

4. useEffect

  무언가 변화가 있을 때 감지하여 반응하는 hook이다. useEffect는 컴포넌트가 처음 로드될 때 실행된다. 상태 변화를 감지하거나 전역적인 이벤트를 사용할 때 쓸 수 있다. return으로 반환된 함수는 컴포넌트가 제거될 때 실행된다.

5. useRef

  DOM에 직접 접근할 때 사용하거나 지역 변수로 사용할 때 사용할 수 있다. 여기서 지역 변수로 사용하는 것은 useState로도 할 수 있지만 큰 차이가 있다.

• useState는 값이 변경될 때 다시 렌더링을 한다.
• useRef는 값이 변경되어도 다시 렌더링하지 않는다.