React 완벽 가이드 정리 - 1

Heebeom·2023년 5월 22일

React 완벽 가이드

목록 보기

1/6

이전에 React로 개발한 사무소 웹 페이지를 Refactoring 하기 위해, 새로 React 강의를 찾게 되었다!

Udemy의 react 완벽 가이드 with redux next.js typescript 강의인데, 인터넷에서 평도 좋고 내가 원하는 hooks, 상태 관리 등의 심화 개념까지 다루고 있어 수강하게 되었다. (~~가격도 저렴한 게 좋았다!~~)

강의를 전반적으로 살펴보고, 내가 이전에 미처 발견하지 못했던 내용들을 정리해 간단히 공유하고자 한다.

차세대 JavaScript

새로운 언어가 아닌, 기존 자바스크립트 작성에 도움을 주는 개념들이다.
깔끔하고 강력한 리액트 앱을 작성할 수 있게 해준다.

let, const 변수

기존 자바스크립트는 선언이 var로 통합되어 있었다.
let > 변수(variable value)로, 재할당이 가능하다.
const > 상수(constant value)로, 재할당이 불가능하다.

화살표 함수(arrow function)

function myFunction(a) {
  console.log(a);
}

// 매개변수가 한개인 경우, 괄호는 생력가능하다.
const myFunction = a => {
  console.log(a)
}

// return문을 깔끔히 작성할 수 있다.
const sumNum = (a, b) => a + b;

기존의 함수보다, 빠르고 간결하다.
함수의 기능이 보다 직관적이다.

Exports와 Imports

// default로 내보낸 경우, 자동으로 컴포넌트를 불러온다.
// 컴포넌트의 이름을 자유롭게 수정할 수 있다.
export default Person
...
import Person from Person
import prs from Person

// 그냥 내보낸 경우, 사용자가 직접 중괄호로 불러올 대상을 지정해야 한다.
// 컴포넌트의 이름을 수정하려면, as를 사용해야 한다.
export const Person
...
import {Person as prs} from Person

spread와 rest 연산자

// spread 연산자(...)를 사용하면 기존 배열의 값을 복사할 수 있다.
const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5]; // [1, 2, 3, 4, 5]

// 오브젝트도 가능하며, 만약 중복된 key를 추가로 선언하면 기존 값을 덮어씌운다.
const oldObj = {a: 1, b: 2};
const newObj = {...oldObj, b: 3}; // {a: 1, b: 3}

구조분해할당

// 배열 객체의 원소 값을, 각각에 변수에 할당할 수 있다.
[a, b] = ['hello', 'heebeom'];
console.log(a); // hello
console.log(b); // heebeom

// 중간을 건너띄고 싶으면, 콤마(,)를 이용하면 된다.
[num, , num3] = [1, 2, 3];
console.log(num3); // 3

참조형 및 원시형 데이터 타입

참조형 데이터 타입: array, object 등 (원시형 데이터의 집합)
원시형 데이터 타입: num, string, boolean 등

const Person = {name: 'heebeom', age: 26};
const PersonCopy = Person;
Person.name = 'max';

// PersonCopy가 Person을 참조하기 때문에, name이 같이 바뀌어버렸다.
// 이를 방지하려면, 스프레드를 사용해 배열을 복사해야 한다.
console.log(PersonCopy.name) // max

이전 state에 의존하는 state 업데이트

state 관리와 변경에는 주의를 기울여야 한다.
화살표 함수를 사용해서, 안전하게 상태를 변경하자.

const [userInput, setUserInput] = useState({
	enteredTitle: '',
  	enteredDate: '',
})

setUserInput((prevState) => {prevState..., enteredTitle: 'good'})

자식 대 부모 컴포넌트 상향식 통신

부모에서 handler 함수를 작성하고, 자식의 정보를 handler 함수에 기록할 수 있다.
단, 자식에게 함수의 포인터를 전달해야 한다! (괄호를 빼야 한다.)
하지만 상향식으로 통신할 때, 중간 컴포넌트는 건너뛸 수 없다.
(만약, a -> b -> c 이면, c -> a 로는 통신할 수 없다.)

const dataHandler = (data) => {
  const myData = data;
  console.log(myData);
}

<!-- 꼭, handler 함수에 '포인터'를 보내자! -->
<ChildCompnent handler={dataHandler}>

JSX의 제한사항

JSX에서 root 레벨의 요소는 딱 한개만 있어야 한다.
(자바스크립트에서, return문은 딱 한개만 반환할 수 있기 때문에)
그렇다고 div로 무조건 감싸면, div 수프에 빠질 수 있다.

<div>
  <div>
    <div>
      ... <!-- 쓸데 없는 div가 너무 많다! -->

그래서 div 대신 <>이나 <React.fragment> 사용하자.

React 포털

모달, 사이드바, 다이얼로그는 html 상으로 최 상위로 올라가야 깔끔하다.
(CSS로도 지정할 수 있지만, not 깔끔)
react-dom 라이브러리의 createPortal로 원하는 위치로 jump 시킬 수 있다.

public/index.html에 이동할 장소를 지정한다.

...

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="modal-root"></div> <!-- modal이 이동할 장소 -->
    <div id="root"></div>

...

createPortal을 사용해 modal를 이동시킨다.

import ReactDOM from 'react-dom';

...

const ErrorModal = (props) => {
  return (
    <>
    {ReactDOM.createPortal(
      <ModalOverlay />, // 이동할 대상을 지정한다. 여기선 모달임
      document.getElementById('backdrop-root')) // 이동시킬 장소를 지정한다.
    };
    </>
  );
};

Heebeom

이도저도 아닌 개발자

다음 포스트