반응형

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

 

2. 목적

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

- 3항 연산자를 활용하여 front-end 화면이 동적으로 배치되는 방법론을 학습한다.

 

3. 적용

① function 컴포넌트 호출시 매개변수 및 할당값을 전달한다.

 

chap19.html
0.00MB
FuncTbody() 호출과 함께 rowCnt 값 전달

 

② 3항 연산자를 활용하여 전달 받은 매개변수 값에 의해 function 컴포넌트를 배치한다.

props.rowCnt 값에 따른 컴포넌트 배치

 

4. 결과

- function 컴포넌트 호출시, 매개변수 전달값에 따라 다른 결과가 나타나는 것을 확인한다.

- 추후, 사용자 조작에 따라 동적으로 변화하는 웹 페이지를 만들 수 있다.

rowCnt=1인 경우

 

rowCnt=2인 경우

 

 

 

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

반응형

+ Recent posts