gggimmin 개발 블로그 gggimmin 개발 블로그

현재는 자식 컴포넌트에서 props를 받을 때 function Todo(props){ return {props.todo} } 위와 같이 todo를 사용하는 모든 곳에서 props. 을 붙여서 사용했다. 이것을 조금 더 짧게 쓰는 방법이 있는데 바로 자바스크립트 문법의 구조 분해 할당을 이용하는 것이다. props는 object literal ( 중괄호 ' { } '를 사용하여 객체를 직접 생성하는 표기법 ) 형태의 데이터이다. 그래서 구조 분해 할당을 이용해 짧게 props 값을 추출할 수 있다. function Todo({ title }){ return {title} } 구조 분해 할당을 통해 훨씬 간단하고 깔끔해진 모습을 볼 수 있다. 만약 여러개의 props를 받는다면, { } 안에 여러개의 pro..

Props란 ? props는 컴포넌트끼리의 정보교환 방식이다. props는 간단하게 말하면 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터이다. 다시 말해, 컴포넌트 간의 정보 교류 방법이다. 1. props는 반드시 위에서 아래 방향으로 흐른다. [부모] --> [자식] 방향으로만 흐른다 ( 단방향 ). 2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. 아직 블로그에 state에 대해 작성하지는 않았지만 상위 컴포넌트에서 하위 컴포넌트로 어떻게 props가 이루어지는지 이해하기 좋아서 이미지를 가져와봤다. 수업에서 배운 내용을 가져와 props에 대해 복습해보려한다. // src/App.js import React from "react"; function App() { return ;..