[React 완벽 가이드] section 9 : 프래그먼트 작업, Portals & "Refs"

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

108. 모듈 소개 

• JSX Limitations & Fragments
• Getting a Cleaner DOM with Portals
• Working with Refs

109. JSX 제한 사항 및 해결 방법

반환하거나 상수에 저장하는 값은 하나여야 한다. 

 

1. div tag 사용하기

  return (
    <div>
      {error && (
        <ErrorModal
          title={error.title}
          message={error.message}
          onConfirm={errorHandler}
        />
      )}
      <Card className={classes.input}>
        <form onSubmit={addUserHandler}>
          <label htmlFor="username">Username</label>
          <input
            id="username"
            type="text"
            value={enteredUsername}
            onChange={usernameChangeHandler}
          />
          <label htmlFor="age">Age (Years)</label>
          <input
            id="age"
            type="number"
            value={enteredAge}
            onChange={ageChangeHandler}
          />
          <Button type="submit">Add User</Button>
        </form>
      </Card>
    </div>

2. 네이티브 JS array 사용하기 

  return [
    error && (
      <ErrorModal
        title={error.title}
        message={error.message}
        onConfirm={errorHandler}
      />
    ),
    <Card className={classes.input}>
      <form onSubmit={addUserHandler}>
        <label htmlFor="username">Username</label>
        <input
          id="username"
          type="text"
          value={enteredUsername}
          onChange={usernameChangeHandler}
        />
        <label htmlFor="age">Age (Years)</label>
        <input
          id="age"
          type="number"
          value={enteredAge}
          onChange={ageChangeHandler}
        />
        <Button type="submit">Add User</Button>
      </form>
    </Card>,
  ];

→ 배열을 반환할 수 있는 이유는 리액트 JSX 요소의 배열을 다룰 수 있기 때문이다.

→ 하지만 위 방법 사용시 경고가 나온다. JSX 요소인 배열로 작업할 때마다 react는 모든 요소에 대한 key를 필요로 하기 때문이다. 

 

문제

• 불필요한 div들이 모두 실제 DOM으로 렌더링 된다. 페이지에 어떤 의미도, 구조적인 의미도 갖지 않음에도 불구하고!
• In bigger apps, you can easily end up with tons of unnecessary <div>s (or other elements) whick add no sematic meaning or structure to the page but are only there because of React's/JSX' requirement. 
• 너무 많은 html 요소를 랜더링하면 궁극적으로 애플리케이션이 느려질 것이다. 

 

111. 리액트 fragment

• It is an empty wrapper component: It doesn't render any real HTML element to the DOM. But it fulfills React's/JSX' requirement. 

return (
    <React.Fragment>
        <h2>Hi there!</h2>
    </React.Fragment>
);

return (
    <>
        <h2>Hi there!</h2>
    </>
);

 

112. 리액트 Portal 소개 

• 스타일링만 제대로 한다면, modal은 문제가 없다. 하지만 "Semantically" 관점이나 "clean HTML structure" 관점으로 보면 별로 좋진 않다. 기본적으로 modal은 페이지 위에 표시되는 overlay이기 때문. 이 모달이 다른 Html 코드 안에 중첩되어 있다면 기술적으로는 스타일링 때문에 잘 작동할지는 몰라도 좋은 코드는 아니다. 좋은 구조도 아니다. 
• 리액트에서는 Portals 을 사용하면,  overlay 내용이 있는 modal이 깊게 중첩되는 문제를 해결할 수 있다! 

 

113. Portal 작업하기

• 리액트 dom은 브라우저에 대한 리액트용 어댑터의 일종이라 할 수 있다. 
• 리액트에 의해 이미 랜더링 된 기존 애플리케이션 내부로 포털시킨다. 즉 렌더링 하려는 HTML 내용을 다른 장소로 이동시키는 것!

 

114. "ref" 로 작업하기 

• ref는 참조 (reference)를 뜻한다. 다른 DOM 요소에 접근해서 이를 통해 작업할 수 있도록 해주는 것이다. 현재 AddUser 컴포넌트에서는 매번 버튼을 누를 때마다 state가 업데이트 된다. 사용자로부터 얻은 값을 업데이트하고, 그것을 state에 저장하고, 그 state를 input에 다시 준다. 그리고 이 state 를 사용하여 input을 재설정하고 데이터가 필요한 곳으로 보내기도 한다. 이렇게 관리해도 좋지만, form을 제출할 때만 필요한데도 key를 입력할 때마다 state를 업데이트하는 건 약간 과하다. 이럴 때 ref를 사용할 수 있다! 
• useRef라는 hook을 사용하여 ref를 생성할 수 있다. 

const nameInputRef = useRef();
const ageInputRef = useRef();

 
 <input
    id="username"
    type="text"
    value={enteredUsername}
    onChange={usernameChangeHandler}
    ref={nameInputRef}
  />
  
  console.log(nameInputRef);

→ There is a object being output here and that object has a current property. Now, that's important. This ref value, which is being generated here always is an object, whcich always has a current prop and the current prop holds the actual value that ref is connected with 

  console.log(nameInputRef.current.value);

→ value 값 확인이 가능하다! 위 두개의 ref 사용으로 인해 usernameChageHandler, ageChangeHandler, 관련 state를 삭제해도 올바르게 동작한다. 하지만 addUser 시 reset되는 로직 사라진다. 

nameInputRef.current.value = "";
ageInputRef.current.value = "";

→ 다음 코드를 통해 reset를 시켜주면 된다 :) 

그래서 state, ref 뭐가 더 좋을까? 

• 예를 들어 value를 빠르게 읽고 싶을 때가 있다. 값만 읽고 싶고 아무것도 바꿀 계획이 없다면 state는 필요하지 않는다. 이럴 경우에는 ref 사용이 더 나을 것. 
• 하지만 현재 우리의 케이스에서는 원하는대로 선택하면 된다. ref가 코드가 적긴 하지만 DOM을 조작한다는 예외적인 일을 해야 하고, state는 확실히 더 깔끔하지만 코드를 더 많이 사용해야 한다. 

 

115. controlled 컴포넌트와 uncontrolled 컴포넌트

• controlled component : state 사용 
• uncontrolled component : ref 

---

https://www.udemy.com/course/best-react/