리액트 시작하기 - 1

리액트로 영화 웹서비스 만들기를 시작하기 전 state와 props에 대한 개념을 공부했다.

일단 react는 무엇인가!

react란?

궁금한 것이 있을 때 가장 많이 찾는 구글에 react를 검색해보았다.

React is a free blah?blah?

라고 한다.

요약하자면, for building user interfaces based on UI componenets

컴포넌트 기반으로 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 한다.

react의 목적에서 알았듯이 컴포넌트를 이용해서 개발을 한다고 한다.

컴포넌트?

컴포넌트가 중요한 개념임을 알았다. 리액트 공식 문서에서 react-components를 정의하고 있다.

그 전에

하늘색으로 하이라이트 된 부분을 보면 state와 lifecycle, Props, components를 잘 모르면 안된다고 한다.

짐작할 수 있었다.

4가지의 개념이 리액트에서 절대 모르면 안되는 개념임을...

그보다 먼저 리액트 왜 쓰는지 알아보자

리액트 왜?

count를 증가시키는 웹 어플리케이션을 만들어보자.

<p>0</p>
<button onClick="countUp">click</button>  
<script>
  let count = 0
  function countUp(){
	count++;
}
const p = doucment.querySelector('p')
p.innerText = count
</script>

버튼을 클릭하면 p태그 안의 count를 증가시키는 어플리케이션을 만들었다. 버튼을 클릭하면 p태그가 바뀐다.

리액트로 카운트 어플리케이션을 만들면 어떤 점이 다를까?

 const root = document.getElementById("root");
    let counter = 0;

    function countUp() {
      counter++;
      render();
    }
    function render() {
      ReactDOM.render(<Container />, root);
    }

    const Container = () => {
      return (
        <div>
          <p>Total clicks: {counter}<p>
          <button onClick={countUp}>click me</button>
        </div>
      );
    };
    render();

좋은 리액트 코드는 아니다. 굉장히 불편하고 사용하지 않는 방식의 코드 스타일이다. 하지만 리액트의 동작에 대해서 볼 수 있다.

바닐라 자바스크립트는 p태그 자체가 바뀌는 걸 볼 수 있다. 하지만 리액트는 p태그 안에 텍스트만 바뀌고 있다!!

그게 그거 아니야?

엄청 놀랍다고 하지만 와닿지 않는 이유는 count를 증가시키는 일이 너무 사소하기 때문이다.

일단 이렇게 기억하자!

리액트는 변경된 부분만 update된다.

state

위 코드로 리액트의 핵심에 대해 알게 됐다. 좀 더 리액트스러운 코드를 만들면 리액트의 특이한 state변수를 활용해야 한다.

import {usestate} from 'react'

function App(){
  const [count, setCount] = useState(0)
  return <div>
      {count}
  	  <button onClick={() => {
        setCount(cur => cur+1)
      }/></button>
    </div>
}

코드가 너무 깔끔해졌다. 버튼을 클릭하면 setCount가 현재 값에서 1을 증가시켜 count를 증가시킨다.

count의 값이 변경될 때마다, setCount를 호출할 때마다 리액트는 해당 컴포넌트만 새로 렌더링하는 것이다.

setCount없이 count값을 직접 바꾸면 안되나?

안됩니다.

state는 어플리케이션이 동작하는데 뼈대가 되는 변수들이므로 아무나 함부로 수정할 수 있게 하면 프로그램이 복잡해질 수 있습니다.

그래서 count는 읽기 전용이고 setCount는 읽기 전용 변수를 참조할 수 있는 함수 입니다.

props

props는 일종의 매개변수라고 정의할 수 있습니다.

부모 컴포넌트와 자식 컴포넌트 간 매개변수를 props라고 합니다.

//App.js
import {useState} from 'react'
import Count from "./Count

function App(){
  const [count, setCount] = useState(0)
  return <div>
      <Count count={count} />
    </div>
}
  
//Count.js
export default function Count({count}){
	return <h1>{count}</h1>
}
export default function Count(props){
	return <h1>{props.count}</h1>
}

억지로 props를 이용해 count변수를 h1태그에 담는 컴포넌트를 만들었습니다.

props를 받아오는 방식은 위 코드처럼 두가지가 있는데 첫 번째 방법이 더 직관적이므로 위 방법을 권장합니다!

props는 자바스크립트의 모든 데이터 형을 받아 올 수 있습니다.

함수, 객체, 배열, 원시타입 전부 가능해 state를 매개변수로 받아올 수 있습니다.

또 자주 쓰이는 방식은 handle함수를 매개변수로 받아와 데이터를 처리하는 것도 많이 사용됩니다.

하지만 자식 컴포넌트에서 부모 컴포넌트로 props를 전달하는 것은 불가능합니다!

결론

리액트는 러닝커브가 굉장히 가파른 지식이라고 합니다. 몇 시간 state와 props를 공부했다고 이 개념을 정확하고 완벽하게 이해한건 아니기에 많이 사용해보면서 익혀야 할 것 같습니다.
hook에 대해 정리해보고 리액트를 이용한 toDoList 만들기를 해보겠습니다.