리액트의 핵심!

리액트에서 가장 중요한 기능인 props와 useState에 대해서 정리해보겠다.
리액트는 컴포넌트와 페이지를 활용해 웹을 구성하는만큼 컴포넌트간 변수와 함수전달을 활용해야 한다. 이거 안쓰면 리액트 쓸 이유가 없다.

1. props

props는 properties의 줄임말이다. 단어의 뜻대로 속성 값을 컴포넌트로 넘겨주는 기능을 한다.
우선 App.js 에서 Hello.js 컴포넌트를 불러온다.

import './App.css';
import Hello from './Hello.js';

function App() {
  return (
    <div>
      <Hello name="react"/>
    </div>
  );
};

export default App;

그리고 위의 코드처럼 Hello.js 컴포넌트에 props로 name이란 이름에 react라는 문자열을 전달해준다.

import React from "react";

function Hello(props){
    return(
        <div>
            {props.name}를 배워봅시다!
        </div>
    );
};

export default Hello;

그리고 Hello.js 에서 props값을 인자로 받는다. 이제 App.js에서 넘겨주는 props값을 사용할 수가 있다.
App.js 에서 props의 이름을 name으로 넘겨줬기 때문에 props.name 으로 값을 불러와 준다. 그러면 출력값으로 props의 문자열 데이터인 "react"가 출력된다.

넘겨주는 props가 하나일 경우에는 위의 방식을 사용하면 되지만 props의 종류가 많아지고 가독성이 떨어진다. 그럴때는 비구조화 문법을 사용하면 코드가 간결해질수 있다.

여러개의 props를 전달할때도 위의 방식대로 하면 된다.

import './App.css';
import Hello from './Hello.js';

function App() {
  return (
    <div>
      <Hello name="react" color="blue"/>
    </div>
  );
};

export default App;

그리고 컴포넌트에서도 같은 방식으로 불러온다.

import React from "react";

function Hello(props){
    return(
        <div style={{color: props.color}}>
            {props.name}를 배워봅시다!
        </div>
    );
};

export default Hello;

props가 여러개이기 때문에 props.변수명 으로 할당해준다.
비구조화 문법을 사용하면 좀더 간결하게 만들수 있다.

import React from "react";

function Hello({name,color}){
    return(
        <div style={{color: color}}>
            {name}를 배워봅시다!
        </div>
    );
};

export default Hello;

두 방식 모두 같은 결과를 보여준다.

나는 개인적으로 이 방식이 더 깔끔하고 가독성이 좋은것 같다.
props를 넘겨주다보면 props명과 props값이 헷갈릴때가,,,

조건부 렌더링

컴포넌트를 바로 불러와 실행시키면 좋지만 렌더링 이슈가 발생할 수 있다.
(핵심 props의 정보가 없거나 오류의 경우)
그래서 해당 props의 정보가 있을때 설정한 페이지를 렌더링하도록 조건부 렌더링을 하도록 코드를 작성한다.

import './App.css';
import Hello from './Hello.js';

function App() {

  const arr = [1,2,3];

  return (
    <div>
      <Hello name="react" color="blue" arr={arr}/>
    </div>
  );
};

export default App;

위의 코드처럼 임의의 배열을 Hello.js에서 출력해야 한다고 할때

import React from "react";

function Hello({name,color,arr}){
    return(
        <div style={{color: color}}>
            { arr ? <b>{arr}</b>: null
            } {name}를 배워봅시다!
        </div>
    );
};

export default Hello;

삼항연산자를 통해 배열의 값이 true일때 해당 배열을 출력하도록 한다.
만약 출력값이 달라지는 경우에는 삼항 연산자를 사용하지만 위의 코드처럼 출력만 하는 경우에는 &&연산자를 사용한다.

import React from "react";

function Hello({name,color,arr}){
    return(
        <div style={{color: color}}>
            { arr && <b>{arr}</b>}
            {name}를 배워봅시다!
        </div>
    );
};

export default Hello;

2. useState

리액트에서 데이터를 수정할때는 직접 수정할수 없다. useState를 통해 데이터를 읽고 수정할 수있다. 사용법은 간단하다.

const [num, setNum] = useState(0);

위의 코드에서 num은 state값을 읽는데 사용한다. 현재 num을 출력하면 0이 출력된다.
setNum은 setter함수이다. state값을 수정할때 해당 함수를 불러와 수정할 수 있다.

setNum(5);

setNum으로 수정된 num의 값은 5가 출력된다.
이렇게 선언한 state값과 setter함수도 props로 전달이 가능하다. 하지만 수정된 state값은 컴포넌트가 다시 실행되거나 페이지가 새로고침될 때 원래 값으로 돌아온다. state값을 저장해서 사용하고 싶다면 전역변수라이브러리(redux,recoil 등)을 사용해야 한다.
라이브러리 사용을 안하려면 로컬스토리지에 저장해서 꺼내쓰는 방법도 있지만 나중에 다른 포스트에 담아보겠다.

마무리

처음 이 개념을 익혔을때 유튜브 강의를 몇번을 돌려봤는지 모르겠다. 하지만 가장 빨리 익히는 법은 직접 코드에 적용을 시켰을때였다. 백문이불여일견이라는 선조들의 말이 맞다,,,
자바스크립트만 하다가 리액트를 처음 접했을때의 느낌은 드디어 머리를 쓰는구나 생각했다. 이 분야에서 노력하지 않으면 도태되겠다는 것을 조금이나마 느꼈다. 그리고 빨리 공부하고 연습해서 잘하고 싶다는 다짐도 함께했다. 아직 처음이라 그런건지 나랑 잘 맞는건지 모르겠지만 긍정적인 신호이다. 아직 가야할 길이 한참이다. 천리길도 한걸음부터! 이제부터 시작이다!