React - component

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 쉽게 말해 리액트에서 앱을 이루는 가장 작은 조각이라 할 수 있다.

표현방법

1. 함수형 컴포넌트
   (공식 홈페이지에서 권장함)
   JavaScript 함수를 작성하는 것과 같다.

2. 클래스형 컴포넌트
   (잘 사용하지 않는다)

---

컴포넌트 만드는 법

1. function 만들기
   다른 함수 바깥에서 만들어야 하며 작명은 영어 대문자
   return(이 안에서는 하나의 태그에서 하나의 태그로 끝나야 한다)
   

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2. return()안에 html 담기

3. <함수명></함수명> 쓰기 (다른 컴포넌트 내에서)
   or <함수명/>

---

언제쓰면 좋을까🤔

1. 반복적인 html 축약할 때
2. 큰페이지(페이지 변경할 때)
3. 자주 변경되는 것들

---

규칙🗒️

• 컴포넌트명은 무조건 '대문자'로 시작
• 폴더 만들때는 카멜케이스(첫단어는 소문자, 뒤는 대문자)로 폴더명 작성하여 생성
• tag에 style을 사용할 경우 style={{ }} 객체 형태로 작성

---

그냥 알아두면 좋을것 같은 지식

JSX(Javascript + XML(HTML))

• return문 안에서 html과 같은 형태
• jsx 문법으로 react 요소 만들고 DOM에 렌더링시킴

컴포넌트 함수 자동완성
우선 VsCode 확장에서 'ES7+ React/Redux/React-Native snippets' 설치
js 파일에서 아래의 문자 입력하면 함수가 자동 완성된다.

• rfc - export포함 함수
• rfce - function 함수

return ({함수명or 삼항 , map 다양하게 옴})

파일명!!
jsx가 들어가는 것들은 컴포넌트이기 때문에
파일명.js 보다 .jsx라고 확장자를 표기 해주는 것이 좀 더 명확하다.
js 확장자와 jsx 확장자의 차이는 없다.
다만 협업할 때 컴포넌트를 정확히 명시할 수 있어 파일의 용도를 쉽게 파악할 수 있다. 그래서 웬만하면 따로 표기하는 것이 좋을 듯 하다.

---

참고자료
항해99 리액트 입문 강의
코딩애플 React 강의
React 문서 - Components와 Props