[React] Props를 통해 데이터 전달하기 - 리액트 자습서3
2022. 10. 27. 20:03
프로그래밍/React
Props를 통해 데이터 전달하기 본격적으로 시작하기 위해 Board 컴포넌트에서 Square 컴포넌트로 데이터를 전달해 보자 Square에 value prop을 전달하기 위해 Board의 renderSquare 함수 코드를 수정하기 class Board extends React.Component { renderSquare(i) { return ; } } 값을 표시하기 위해 Square의 render 함수에서 {/* TODO */}를 {this.props.value}로 수정 class Square extends React.Component { render() { return ( {this.props.value} ); } } 변경 전에는 변경 후에는 렌더링 된 결과에서 각 사각형에 숫자가 표시됨 지금까지의..
[React] Components와 Props
2022. 10. 7. 20:10
프로그래밍/React
Components와 Props 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음 이 페이지에서는 컴포넌트의 개념을 소개할 것임 👉 자세한 컴포넌트 API 레퍼런스는 여기에서 확인 개념적으로 컴포넌트는 JavaScript 함수와 유사함 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것 function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 ..