[React] React 왕기초 문법 정리 2(아니 이것도 정리한다고?)

1탄에 이어서 작성하도록 하겠습니다.

 

 

2022.11.30 - [개발/React] - [React] React 왕기초 문법 정리 1(아니 이것도 정리한다고?)

[React] React 왕기초 문법 정리 1(아니 이것도 정리한다고?)

1탄 안 보고 오신 분은 위 포스팅 보고 오시면 됩니다.

 

 

 

 

(문법 정리 목록)

• export -> import
• 동치 연산자
• if, else
• 삼항 연산자
• setState
• ...props
• object.keys(values)
• `${변수사용}` ( 따옴표 아님)

 

 

---

 

5. setState

setState()는 컴포넌트의 state 객체에 대한 업데이를 실행하게 됩니다. 비슷한 예로는 props가 있는데 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

 

incrementCount() {
  this.setState((state) => {
    // 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다.
    return {count: state.count + 1}
  });
}

handleSomething() {
  // `this.state.count`가 0에서 시작한다고 해봅시다.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();

  // 지금 `this.state.count` 값을 읽어 보면 이 값은 여전히 0일 것입니다.
  // 하지만 React가 컴포넌트를 리렌더링하게 되면 이 값은 3이 됩니다.
}

현재 setState는 이벤트 핸들러 내에서 비동기적입니다.

이로 인해 부모와 자식이 모두 click 이벤트에서 setState를 호출한다면 자식은 두 번 렌더링 되지 않습니다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트합니다. 이는 더 큰 규모의 앱에서 뚜렷한 성능 향상을 만들어 냅니다.

 

 

 

이 글은 React 공식 사이트에서 가져온 내용입니다. 자세한 내용은 여기에서 확인하시면 됩니다.

 

---

 

6. ...props

제목에 아니 이것도 정리한다고? 를 쓴 이유가 가장 큰 문법입니다. 구글링을 해봐도 제대로 된 정리 자료가 나오지 않아 검색이 쉽지 않았습니다.

보통 구글링으로 "react ...props 의미" 이런 식으로 검색하면 앞에 ...은 무시되고 props의 대한 정리 자료만 나오게 되어 찾기 어려웠습니다.ㅠㅠ 그래서 결국 공식 자료에서 찾아 공유해드리려고 합니다.

 

이미 props객체로 가지고 있고 JSX에서 전달하려는 ...경우 "확산" 구문을 사용하여 전체 props 객체를 전달할 수 있습니다. 이 두 구성 요소는 동일합니다.

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

스프레드 구문을 사용하여 다른 모든 소품을 전달하는 동안 구성 요소가 사용할 특정 소품을 선택할 수도 있습니다.

 

const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  );
};

 

위의 예에서 kindprop은 안전하게 소비되며 DOM 의 요소로 전달되지 않습니다.<button>다른 모든 소품은 ...other객체를 통해 전달되어 이 구성 요소를 정말 유연하게 만듭니다. onClickand childrenprops 를 전달하는 것을 볼 수 있습니다.

확산 속성은 유용할 수 있지만 불필요한 속성을 신경 쓰지 않는 구성 요소에 전달하거나 유효하지 않은 HTML 속성을 DOM에 전달하기 쉽게 만듭니다. 이 구문은 드물게 사용하는 것이 좋습니다.

 

 

 

 

이 글은 React 공식 사이트에서 가져온 내용입니다. 자세한 내용은 여기에서 확인하시면 됩니다.

 

---

 

7. object.keys(values)

object.keys는 [key:value]의 형태를 지닌 array에서 key값만 반환시켜주는 것이고,

object.values는 위와 같은 형태에서 value값만 반환시켜주고,. 여기서 key, value 둘 다 같이 반환하고 싶을 땐

object.entries를 사용하면 [key:value]의 형태로 반환시켜줍니다.

여기서, 주의할 점은 반환 시 객체의 순서를 보장하지 않으므로 정렬을 해주고 사용하는 것을 권해드립니다.

 

---

 

8.`${변수사용}` ( 따옴표 아님)

  function addTask(name) {
    const newTask = {id: `todo-${nanoid()}`, name, completed: false };
    setTasks([...tasks, newTask]);
  }

위 코드를 보면 `todo-${nanoid()}` 가 있습니다. 여기서 `${변수}`를 넣어서 사용하는 형식인데, 어렵지 않은 부분인데 처음 하시는 분들은 잘 모르실 수 있습니다. 여기서 잘 보시면 따옴표로 감싼 모습 같지만 사실 이건 따옴표가 아니라 따옴표보다 살짝 더 기울어진 backtick라는 기호입니다. 이 기호는 키보드에서 ~표시에 같이 쓰여있는 기호로 쉬프트를 누르지 않은 상태에서 누르면 나오는 기호입니다.

다시 말하지만 변수 사용할 때는 작은따옴표 ' 가 아니라 backtick ` 입니다.!!