본문 바로가기

리액트props

(2)
[리액트 React] props node / props의 자식 컴포넌트에 node 전달 / 컴포넌트 node 전달하기 node html 문서를 구성하는 포괄적인 개념. 태그 요소, 속성, 텍스트, 주석 등. 예) apple : 태그 요소 id : 속성 apple : 텍스트 App.js 작성하기 props를 하위 컴포넌트 태그 안쪽에 선언하는 방법 말고도, 하위 컴포넌트 태그 사이에 작성된 node를 전달할 수 있다. import React from 'react'; import './App.css' import UsePropsNode from './UsePropsNode'; function App() { return( node from App.js ) } export default App; 2-1. 클래스형 컴포넌트 UsePropsNode.js 작성하기 import React, { Component } from 'reac..
[리액트 react] 컴포넌트의 속성을 지정하는 법 / Props Props JSX 문법에서 컴포넌트를 작성할 때 속성을 지정한 것. Properties의 약자 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달된다. 컴포넌트를 활용할 때 속성값을 다양하게 전달하고 이 props 값을 활용하면, 똑같은 컴포넌트라도 전달된 속성값에 따라 서로 다른 모습을 그려낼 수 있다. // App.js import Tooktak from './Tooktak'; function App() { return ( ); } export default App; 위 코드에서 color와 같이 속성을 정해주는 것을 props라고 한다. (리액트에서는 속성이란 단어 대신 프롭이라고 말한다.) App.js에서 전달한 프롭스를 Tooktak 컴..

728x90