반응형

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

 

2. 목적

- 간단한 블로그를 단계별 제작하는 방법을 통해서 ReactJS 사용법을 익힌다.

- 신규 프로젝트에 하위 컴포넌트들을 추가해 나가면서 프로젝트를 완성하는 방법을 확인한다.

 

3. 적용

① src/App.js 파일에서 기존 main 페이지 내용을 주석처기하고 WorldList 컴포넌트를 추가한다.

main 페이지


② WorldList 컴포넌트의 내용을 작성한다.

    - WorldTitle 하위 컴포넌트를 포함하고 임포트한 것을 확인한다.

WorldList 컴포넌트

 

③ WorldTitle 컴포넌트의 내용을 작성한다.

    - WorldTitle 컴포넌트에서 css 속성을 적용하는 방법을 확인한다.

WorldTitle 컴포넌트

 

④ WorldTitle 컴포넌트에 적용한 css 속성을 확인한다.

css 속성

 

4. 결과

① npm start 명령어로 프로젝트를 실행하면, 메인 페이지가 수정된 것을 확인할 수 있다.

    - 하위 컴포넌트들을 차례대로 추가해 나가면서 프로젝트를 완성한다.

프로젝트 실행 결과

 

 

 

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

반응형

+ Recent posts