React 입문

✅ JSX

1. 닫는 태그는 꼭 필요!
2. 최상위 태그 1개만 반환
3. 자바스크립트를 사용하려면 { } 사용
4. 스타일을 지정할 때는 { } 안에 객체로 넣어야 함
   (변수로도 사용 가능)

    <div
      style={{
        height: '100vh',
      }}
    >
    </div>

const App = () => {
  const divStyle = {
    color: "red"
  }
  return <div style={divStyle}></div>;
};

✅ Props

• 부모 -> 자식으로 내려준 데이터 (단방향으로만 가능)
• 읽기 전용으로 취급하며 변경하지 않음
• prop drilling : 자식 컴포넌트에게 데이터를 전달만 해주는 일이 반복되는 현상
  💡 이를 피하기 위해 redux를 사용

✅ children 사용하기

• Layout 컴포넌트를 만들 때 자주 사용
  (ex. 모든 페이지에 header를 고정하고 아래 내용을 바꾸고 싶을 때)
  

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}

✅ State

• 컴포넌트 내부에서 바뀔 수 있는 데이터
• 왜 바뀌어야 할까?
  💡 UI에 반영하기 위해

const [value, setValue] = useState('')

• State를 만들 때는 useState() 훅을 사용
• State를 변경하고 싶을 때는 setValue()를 사용

✅ 불변성

• 불변성 : 메모리에 있는 값을 변경할 수 없는 것

• 왜 리액트에서는 원시데이터가 아닌 데이터의 불변성을 지켜주는 것을 중요시할까?
  💡 리액트는 state의 변화에 따라 리렌더링을 하는데,
  state의 변화를 확인하는 기준은 메모리 주소의 비교!
  직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없기 때문에 리렌더링이 일어나지 않음
  (= 바뀐 값이 화면에 반영되지 않음)

• 리액트 불변성 지키기 예시

import React, { useState } from "react";

function App() {
  const [dogs, setDogs] = useState(["말티즈"]);

  function onClickHandler() {
		// spread operator(전개 연산자)를 이용해서 dogs를 복사합니다. 
	  // 그리고 나서 항목을 추가합니다.
    setDogs([...dogs, "시고르자브르종"]);
  }

  console.log(dogs);
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

✅ 순수함수

• 순수함수 : 하나 이상의 인자를 받고, 인자를 변경하지 않고 참조하여 새로운 값을 반환하는 함수
  (=같은 input 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수(코드블록))
• 컴포넌트의 많은 루틴을 순수함수로서 작성하기를 요구함
  • 컴포넌트에서 state와 props가 같으면, 항상 같은 값을 반환해야함
  • 다른 Side effects를 발생시키지 않아야 함 (HTTP 요청, 데이터 저장, 쿠키 조작 등)
• 컴포넌트의 상탯값은 불변 객체(Immutable Object)로 관리해야만 함
  • 수정할 때에는 기존 값을 변경하는 것이 아니라, 같은 이름의 새로운 객체를 생성
• 이를 통해, UI 개발의 복잡도를 낮추고, 버그 발생 확률도 줄임
  (같은 입력에 대해 항상 같은 출력을 보장하니 테스트 하기도 수월)
  
  

예시

순수함수

// 매개변수를 복사한 값을 변경하는 순수함수
const addSixPure = (arr) => {
  // 펼침 연산자로 새로운 배열에 6 추가
  newArr = [...arr, 6];
  return newArr;
};

순수함수가 아닌 것

const num_arr = [1, 2, 3, 4, 5];

// 매개변수의 값을 직접 변경하는 불순함수
const addSixImpure = (arr) => {
  // 매개변수에 직접 6 추가
  arr.push(6);
  return arr;
};

✅ 기타

• .js 파일과 .jsx 파일은 서로 동일하지만 컴포넌트로 쓰일 파일에는 .jsx 확장자를 붙여주는 것이 협업시에 알아보기 쉬움