리액트 - 구조 분해 할당(js 문법)

❤️‍🔥TIL : Today I Learned

 

구조 분해 할당 - 자바스크립트 표현식

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여
그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 

(출처: MDN)

 

• 구문 

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

 

위 처럼배열이나 객체를 쪼개 필드 값을 변수에 담을 수 있다. 

 

 

 

• 배열 구조 분해

const 과일 = ['사과', '바나나', '배'];
const [one, two, three] = 과일;
console.log(one, two, three);
// 사과, 바나나, 배

const 나이 = [26, 24, 52];
const [나, 동생] = 나이;
console.log(나, 동생);
// 26, 24

분리된 선언도 구조 분해가 가능하다

let me, sister;

[me, sister] = [26, 24];

console.log(me); // 26
console.log(sister); // 24

 

 

• 객체 구조 분해
  React에서의 props 형태가 객체이기 때문에
  우리가 구조분해를 사용 할 수 있다.

const 사과 = {
  종류: 'fruit',
  색: 'red',
  모양: 'circle'
}

const { 종류, 색, 모양 } = 사과;
console.log(종류, 색, 모양); // 'fruit', 'red', 'circle'

- 다만 for 문을 이용하여 args 를 하나씩 돌아 넘겨줘야 합니다!

 

 

• (**kwargs)
  매개변수를 딕셔너리 형태로 받을 수 있습니다!
  

# 딕셔너리 반환
# 키워드 인수를 여러 개 받는 방법!

def get_kwargs(**kwargs):
    print(kwargs)

get_kwargs(name='bob') # {'name': 'bob'}
get_kwargs(name='john', age='27') # {'name': 'john', 'age': '27'}

 

 

---

 

 

구조 분해 할당 -  React 표현식

 

• useState
  

function Login() {
  const [inputValue, setInputValue] = useState({
    email: '',
    password: '',
  });
    // useState 에 들어갈 객체
  
  const { email, password } = inputValue;
    // 구조 분해 할당식

  const handleInput = event => {
    const { name, value } = event.target;
    setInputValue({
      ...inputValue,
      [name]: value,
    });
  };
  
  return (
    <form className='loginInput'>
    <input name='email' onChange={handleInput} />
    <input name='password' onChange={handleInput} />
   </form>
 );
}

 

 

 

• 함수 컴포넌트 안에서의 구조 분해 할당
  
  
  • 본문 안에서의 구조 분해 할당

// TodoList.jsx

const TodoList = () => {
    // 오늘 할 일
    const [todo, setTodo] = useState([
        {
            id: 1,
            title: "환기 시키기",
            content: "오늘 17시에 빨래하고 18시에 널기",
            done: true,
        }
    ]);

    // 제목, 내용 빈값(빈칸)
    const [title, setTitle] = useState("");
    const [content, setContent] = useState("");
    
 	// 오늘 할 일 + 새로운 할 일
    const addTodoHandler = () => {
        const newTodo = {
            id: todo.length + 1,
            title: title,
            content: content,
            done: false,
        };
        setTodo([...todo, newTodo]);
    };

    return (
        <Layout>
            <Header 
            title={title}
            setTitle={setTitle}
            content={content}
            setContent={setContent}
            addTodoHandler={addTodoHandler}
            />
            // 이 부분에서 props로 넘겨주고 있다

            <List todo={todo} setTodo={setTodo}/>
        </Layout>
    );
};


// Header.jsx

const Header = (props) => {
    const { title, setTitle,content, setContent, addTodoHandler} = props
    // 헤더에서 받아온 props를 함수 컴포넌트안에서 구조분해 할당으로 가져왔다
    return (
    <header>
        <label> 제목 </label>
        <input
            value={title} // title
            placeholder="오늘의 할 일 입력해주세요"
            // 인풋 이벤트로 들어온 입력 값을 name의 값으로 업데이트
            onChange={(e) => setTitle(e.target.value)} // setTitle
        />
        <label> 내용 </label>
        <input
            value={content} // content
            placeholder="상세 내용을 입력해주세요"
            // 인풋 이벤트로 들어온 입력 값을 age의 값으로 업데이트
            onChange={(e) => setContent(e.target.value)} // setContent
        />
        <CustomButton color="green" onClick={addTodoHandler}> // addTodoHandler
            추가하기
        </CustomButton>
    </header>
    );
};

 

• 인자 안에서 구조분해 할당

function Components({ elements }) { // elements
  return (
    <>
      <li className="message-list-box">
        <div>
          <span className="message-list-id">ex id</span>
          <span className="message-list-content">{elements}</span>  // elements
        </div>
        <button className="message-list-delete-button">X</button>
      </li>
    </>
  );
}

 

 

---

 

 최종 정리 

1. 구조분해할당 : 배열을 해체하여 순차적으로 개별 변수에 담는 것
2. 리액트에서는 함수 컴포넌트 안에서 구조 분해 할당을 사용한다
3. [인자안에서, 본문안에서] 구조 분해 할당 할 수 있다
4. 나는 인자가 너무 길어지는 것이 불편해서, 본문안에서 구조 분해 할당을 사용한다