리액트 컴포넌트란?

React makes building complex, interactive and reactive user interfaces simpler

일을 단순화 하기 위해서 리액트에는 컴포넌트라는 개념이 있다.

all user interfaces in the end are made up with components

사용자 인터페이스에서 재사용할 수 있는 빌딩 블록
html 코드의 결합

resuability - dont need to repeat
separation of concerns - don't do too many things in one and the same place(function) easy to manage

컴포넌트는 어떻게 만들어질가?

declarative approach라는 것으로 component를 만든다.
define the desired target state and let react figure out the actual javascript dom instructions

build your own, custom html element

index.js가 실행되는 첫번째 파일이다.
맨첫번째 줄에 있는것처럼 ReactDom 을 react-dom에서 import했다.

저기 맨 마지막 줄에 App 저것도 component임

app.js를 보면 함수가 return을 하는데 신기하게 자바스크립트파일안에 있는 html 을 리턴한다... 어떻게 된 일일까?

JSX라는 거 때문이라고 한다.

JSX - 자바스크립트 XML을 위한 것이다
우리가 이렇게 간단한 코드를 쓰면
브라우저에서 변형을 해서 화면에 보이게 해준다!

우리는 결국 Component tree를 만들려고 하는것이다.
맨위에 이라는 메인 컴포넌트가 있고
그 밑에 custom html elemetns가 있고 그 밑에
user interfaces들이 있다.

리액트에서 컴포넌트는 자바스크립트 함수일뿐이다!
html코드를 리턴하는 함수일 뿐!

ExpenseItem이라는 파일을 컴포넌트 폴더 밑에 만들어주고
요렇게 컴포넌트 코드를 작성해 주었다.

function ExpenseItem() {
  return <h2>Expense item!</h2>;
}

근데 이렇게만 작성하면 파일 안에서만 사용할 수 있으니까
export해줘야 한다. 그렇게 하는 방법은?

function ExpenseItem() {
  return <h2>Expense item!</h2>;
}

export default ExpenseItem;

요렇게 export해줬고 App.js에

import ExpenseItem from "./components/ExpenseItem";

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem></ExpenseItem>
    </div>
  );
}

export default App;

저렇게 위에 import해줬다.
그리고 알아둬야 할것!
custom component는 항상 대문자로 시작할것.
위에 보이는 코드중

 <ExpenseItem></ExpenseItem>

요렇게 쓴게 export하고 import한거 사용하겠다고 쓴거다.

예를 들어 component에 이렇게 썼다고 해보자

function ExpenseItem() {
  return <div>Date</div>
  <div><h2>Title</h2><div>Amount</div></div>
}

export default ExpenseItem;

세개의 요소를 넣으려고 저렇게 return 후에 다닥다닥 쓰면
오류 생긴다. 왜냐면 return다음에는 하나의 루트만 와야하기 때문이다.
저 위의 코드에서는 루트 두개가 있다..
Date 루트 하나 그리고 Title, Amount 루트 하나!
이걸 실행되게 하기 위한 가장 쉬운 방법은
div로 또 한 번 감싸주는 것이다. 그리고 또 한 번 ()요걸로 감싸줌.

function ExpenseItem() {
  return (
    <div>
      <div>Date</div>
      <div>
        <h2>Title</h2>
        <div>Amount</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

요렇게 말이다. 알아서 prettier이 자동 정렬해줬다ㅋㅋ