[React] 1. 구성과 Component

 

 

 

 목차

1. 구성 설명
2. Component 란?

 

 

 

1. 구성 설명

• npm : react에서 사용할 라이브러리를 모아둔 플랫폼 역할
• node.modules : 라이브러리를 모아둔 폴더
• public : static 파일 보관함
  • index.html : 실질적인 메인 페이지
• src : 소스코드 보관함 (= 코드 짜는 곳)
  • App.js : 메인 페이지에 들어갈 내용을 짜는 곳
• package.json : 설치한 라이브러리 목록, 프로젝트 정보가 있는 곳 

 

 

 

 

2. component 란?

• 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈
• react는 Component의 묶음
• 각각의 Component를 만들고 이를 묶음으로 프로젝트를 만드는 것

 

네이버 예시

 

 

1) 함수형 Component

• 함수의 형태를 띄고 있는 Component
• Component명의 첫 글자는 대문자로 작명

 

 

 

 

2) 사용 예제

•  App.js의 기본형태를 Component를 사용하여 변경
  1. 함수형 Component 만들기
  2. 만들어둔 함수형 Component 호출

 

App.js의 기본 형태

 

함수형 Component 만들기

 

만들어둔 함수형 Component 호출

 

함수형 Component 사용 전 후의 모습은 같음