리액트와 자바스크립트에서의 =, :의 모든 것

매 번 헷갈리는 멍청이라 적어본다..

import React from 'react';

import Todo from '../Todo/Todo';
const TodoList = () => {
  return (
    <Todo
      todo={todo}
      handleUpdate={handleUpdate}
      handleDelete={handleDelete}
    />
  );
};

export default TodoList;

 

Todo라는 컴포넌트가 가지고 있는 todo, handleUpdate, handleDelete라는 prop들에

TodoList 컴포넌트가 가지고 있는 값들을 넘겨주기 위해서는 "="을 사용한다.

이는 하나의 객체({}) 형태로 Todo라는 컴포넌트의 첫 번째 파라미터로 전달된다.

 

즉, Todo 컴포넌트는 

{todo : todo, handleUpdate: handleUpdate, handleDelete : handleDelete}라는 객체를

파라미터로 받는 것이다. 

 

아래 코드는 props라는 첫 번째 파라미터로 객체를 받은 형태이다.

import React from 'react';

const Todo = (props) => {
  const { text, status } = props.todo;

  const handleChange = (e) => {
    const status = e.target.checked ? 'completed' : 'active';
    props.handleUpdate({ ...props.todo, status });
  };
  return (
    <>
      <div>
        <input
          type="checkbox"
          id="checkbox"
          checked={status === 'completed'}
          onChange={handleChange}
        />
        <label htmlFor="checkbox">{text}</label>
        <button onClick={() => props.handleDelete(props.todo)}>삭제</button>
      </div>
    </>
  );
};

export default Todo;

 

아래는 구조분해 할당을 하여 파라미터로 받은 객체의 내부 값들을 바로 사용하고 있다.

import React from 'react';

const Todo = ({ todo, handleDelete, handleUpdate }) => {
  const { text, status } = todo;

  const handleChange = (e) => {
    const status = e.target.checked ? 'completed' : 'active';
    handleUpdate({ ...todo, status });
  };
  return (
    <>
      <div>
        <input
          type="checkbox"
          id="checkbox"
          checked={status === 'completed'}
          onChange={handleChange}
        />
        <label htmlFor="checkbox">{text}</label>
        <button onClick={() => handleDelete(todo)}>삭제</button>
      </div>
    </>
  );
};

export default Todo;

 

 

객체의 각 요소에 기본 값을 설정해줄 수 있으며, 그럴 땐 "="을 사용한다.

import React from 'react';

const Todo = ({ todo = [], handleDelete, handleUpdate }) => {
  return <></>;
};

export default Todo;

 

또한 파라미터로 받은 객체를 구조분해 할당을 하여 받는다면,

아래와 같이 컴포넌트 내부에서 이름을 변경하여 사용할 수 있다.

 

import React from 'react';

const Todo = ({ todo, handleDelete, handleUpdate: update }) => {
  const { text, status } = todo;

  const handleChange = (e) => {
    const status = e.target.checked ? 'completed' : 'active';
    update({ ...todo, status });
  };
  return (
    <>
    </>
  );
};

export default Todo;

 

 

또 하나 헷갈릴 수 있는 게 있다.

지금까지 이야기는 컴포넌트끼리 프롭을 주고 받을 때를 의미했고, 

아래의 이야기는 함수끼리 파라미터로 객체를 주고 받을 때를 의미한다.

import React, { useEffect, useState } from 'react';
import useProducts from '../../hooks/use-products';

export default function Products() {
  const [loading, error, products] = useProducts({ salesOnly: checked });
  return (
    <>
    </>
  );
}

import { useEffect, useState } from 'react';

export default function useProducts({ salesOnly }) {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(undefined);
  const [products, setProducts] = useState([]);

  return [isLoading, error, products];
}

 

useProducts은 파라미터로 객체를 받으며, 바로 구조분해하여 사용한다.

useProducts을 사용할 때 인수로 객체를 넘겨줘야하는데, 

이 때 {salesOnly : salesOnly}를 넘겨준다면 그냥 {salesOnly}로 생략해서 나타낼 수 있다.

즉, salesOnly라는 프로퍼티 이름에 salesOnly라는 값을 넘겨주고 싶다면 한 번만 작성해도 된다는 것이다.

 

하지만 여기서는 salesOnly라는 프로퍼티 이름에 프로퍼티 이름과는 다른 checked라는 값을 넘겨주고자 하므로

{salesOnly : checked}라는 객체를 넘겨준 것이다.

 

이건 구조분해 후 프로퍼티 이름을 바꾸는 것 아니라, 

{프로퍼티 네임 : 프로퍼티 밸류}라는 쌍을 가진 객체를 넘겨주는 행위이다.

 

헷갈리지말자.

 

 

1) 기본값 지정은 함수를 선언하는 쪽에서만 가능하다.

그러니 프로퍼티 이름 = 기본값 형태는 컴포넌트나 함수를 호출하는 쪽에선 볼 수 없다.

function pos({a = 1 , b}{}  가능

pos({a : 3, b : 5}) 이게 옳지 

pos({a = 3, b = 5})가 아니라는 말이다.

 

 

2) 함수를 선언하는 쪽에서 객체의 구조분해 할당 후 프로퍼티 이름 변경과 

function add({a : c , b}{}

 

3) 함수를 호출하는 쪽에서 객체를 인수로 넘길 때

객체의 프로퍼티 네임과 값의 이름이 다른 경우에는

생략이 불가능하여 명시해주는 것이 헷갈릴 수 있다.

ex) useProduct({salesOnly : checked})

그래서 함수를 호출하는 쪽인지, 선언하는 쪽인지 잘 구분해야한다.