dev/React

[React] React Component

dev_Step 2022. 11. 29. 15:42

ReactComponent 를 사용 하기 위한 방법중 Class를 사용하는 방식으로 기본 틀을 보여준다 

Class에서의 render는 

ReactDOM.render() 에서와 동일하게 JSX를 처리할수 있는 책임이 있다.

render(){}에서 Hello, componentized world! 를 리턴하도록 나타내어 주고 있다.

이제이 컴포넌트를 사용하려면 호출만 해주면 된다. ReactDOM.render() 메서드를 통해서

호출하는 방법이 특이한데,  클래스를 태그 안에 감싸 주면된다. 

 

 

================================================================

Hello, componentized world! 에서   componentized world 부분을 인자로 전달받아서 넣어주는 값에 따라 다르게 출력하기 위해서는 해당 부분의 속성을 지정해줘야 한다. 여기서는 greetTarget으로 지정해 줬다.

해당 속성값을 ReactDOM.render에서 컴포넌트를 호출할때 해당 속성 값에 값을 전달해준다.

1. this.props.behavior 를 통해서 button 의 type 속성을 컨트롤 하고,

2. this.props.chilren을 통해서 button의 text 내용을 SEND DATA로 지정하고 있다. 

 

=========================================================