[React.js] React 컴포넌트 만들기

*컴포넌트 만들 때 주의사항

컴포넌트 이름인 함수명과 변수명의 첫 글자를 대문자로 쓰기

 → 소문자는 리액트가 컴포넌트라고 인식하지 않음

 

 

 

1. 함수 컴포넌트

function 함수명 () {

 return(

 컴포넌트로 사용할 태그들

)

} 

 

 

 

 

2. 함수(화살표) 컴포넌트

const 변수명 = ()  => {

 return(

 컴포넌트로 사용할 태그들

)

} 

 

 

 

3. 클래스를 이용한 컴포넌트도 존재

그러나 이 방식은 코드를 많이 써야 해서 다루기가 힘듦

함수컴포넌트를 주로 이용하자

 

 

 

 

 

+ 컴포넌트들을 여러 파일로 나누기

리액트 컴포넌트들을 하나의 파일에 쓰는 것보다는 모듈화를 위해 컴포넌트를 각각 파일에 구분하는 경우가 많음

컴포넌트마다 각자의 파일 jxs로 나누고

 

각 파일에

 

export default 컴포넌트명(함수명, 변수명) 문구 꼭 추가하고

 

 

App이나 가장 메인 페이지가 될 jsx에

 

import 컴포넌트명 from 파일 주소

 

루트 컴포넌트 return () 내부에 <컴포넌트명/> 태그 추가하기