반응형

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

 

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- 작성한 컴포넌트에 매개변수(props)를 전달하고 참조하는 방법을 학습한다.

 

3. 적용

 컴포넌트 호출과 함께 매개변수를 전달한다.

    - HelloWorld 컴포넌트 호출과 동시에 "Hello World"라는 문자열을 갖는 title(props)을 전달한다.

    - Inform 컴포넌트 호출과 동시에 "Information about your selection..."이라는 문자열을 갖는 article(props)을 전달한다.

컴포넌트와 매개변수

 

② 매개변수(props)를 전달 받은 컴포넌트는 "this.props.변수"의 형태로 전달 받은 값을 참조할 수 있다.

props 사용방법

4. 결과

    - 컴포넌트 호출과 함께 매개변수(props)를 전달 하고 참조하는 법을 확인하였다.

실행 결과

 

 

 

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

반응형
반응형

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

 

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- 기존 function 컴포넌트를 class 컴포넌트로 대체하여 동일한 동작이 되는지 확인한다.

 

3. 적용

① 기존 function 컴포넌트를 주석처리한다.

chap20.html
0.01MB
대체된 function component 주석 처리

 

② class 컴포넌트로 대체하고, 문법 구조를 학습한다.

    - class 컴포넌트에서는 반드시 render(){} 안에 JSX 문법을 사용해야 한다.

function component를 대신할 class component 정의

 

4. 결과

- function 컴포넌트를 class 컴포넌트로 대체해도 동일한 결과가 나타난다.

결과 확인

 

 

 

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

반응형

+ Recent posts