8) ENS Project - 프론트엔드 후딱 학습하기(리액트 컴포넌트, JSX, 속성, 상태)

해당 포스팅은

2024.10.11 - [OpenSource/Spring Boot] - 7) ENS Project - DB로 전환02에서 이어지는 포스팅 입니다.

---

frontend는 vue.js도 분명히..학습을 했는데 시간이 지나면 지날수록 새로운것이 나오고
머릿속에 있던 지식들이 다 날아가버린다..
말 그대로 내머릿속에 지우개ㅋㅋ

이번에는 개인 프로젝트를 수행하면서 명확한 그림을 그려가면서 프론트엔드를 학습하려고 한다.
학습은 옛날에는 항상 책을 사다가 학습을 했는데 요즘은 강의가 많아서 좋은거 같다ㅎㅎ
그러므로 강의를 통해 학습하고자 한다.

학습 후에는 아래와 같은 플랜을 가진다!

1. 프로젝트 설정
2. 프로젝트 구조 이해
3. 컴포넌트 설계
 ex) header(페이지 최상단 - 네비게이션 메뉴 부분)
       content(화면단)
       footer(페이지 하단)
      공통 component(재사용 가능한 UI 요소들)
4. React Router 설정
5. 상태관리
   useState, useEffect 등
6. API 통신
  axios, fetch등
7. 배포

---

학습

JSX에 대해서 학습
Props에 대해서 학습
하나의 파일에서 관리 하던 것을 분리하기
ㄴ src/components
ㄴ 관례적으로 컨포넌트명이랑 파일명이랑 일치 시킨다.(ex.  Header.jsx)
ㄴ 다른곳에서 사용하려면 export키워드를 통해 공유 또는 default키워드를 통해 기본 export를 할 수 있음.
ㄴ 대부분 리액트에서는 default exoprt를 사용함 (export default function Header() {...} )
ㄴ 사용하려는 곳에서 import Header from './components/Header.jsx'; 를 통해 가져옴.

프로젝트의  다른 부분도 나눠야한다. 스타일코드같은 친구들
ㄴ Header.jsx , Header.css
ㄴ import './Header.css';
ㄴ 스타일이 자동으로 되는게 아니라 범위를 설정해야함 -> 이건 뒤에 배움 
폴더구조를 보자
src
  assets
  components
    Header
      Header.jsx
      Header.css
App.jsx
data.js
index.css
index.jsx
index.html
package-lock.json

또 다른 탭 버튼을 하단에 만들어보자!
<section> tag 사용

import TabButton from './componets/TabButton.jsx';
..
...
<section id="examples">
  <h2>Examples</h2>
  <menu>
  	<TabButton>Components</TabButton>
  </menu>
</section>

위처럼 그냥 Components 텍스트를 넣으면 리액트에서 무시함 -> 리액트가 어디에 출력해야할지 모르기 때문!!
커스텀 components에 설정해줘야 함.

export default function TabButton(){
  return <li><button></button></li>;
}

모든 컴포넌트가 props를 받기 때문에 아래처럼 props를 파라미터에 넣어줍니다.

export default function TabButton(props){
  return <li><button></button></li>;
}

여기에서 중요한 내용중에 하나인 children Prop의 개념 입니다.
children Prop에는 컴포넌트 텍스트 사이에 있는 내용이 포함되어있습니다!!

# App Component
<Modal>
	<h2>Warning</h2>
    <p> Do you want to delete..</p>
</Modal>

# Modal Component
<function Modal(props) {
  return <div id="modal"> {props.children} </div>;
}

Text 일수도 있고 복잡한 JSX구조일 수도 있습니다.
위에서 작성한 TabButton은 아래와 같이 변경 됩니다.

아래 코드처럼 props.children으로 내용을 출력할 수 있습니다.

export default function TabButton(props){
  return <li><button>{props.children}</button></li>;
}

혹은 children 객체를 받아서 속성을 추출해 사용할 수 있습니다.

export default function TabButton({children}){
  return <li><button>{children}</button></li>;
}

또한 TabButton에서 label을 사용해서 처리할 수도 있습니다.
취향에 맞게 사용하면 됩니다.

<TabButton label="Components"></TabButton>

export default function TabButton({label}){
  return <li><button>{label}</button></li>;
}

잘 모르는 나같은 초짜면 그냥 html코드를 하나의 파일에다가 때려넣을것 같은데
리액트는 마치 객체지향언어와 비슷한 개념으로 재사용을 합니다.

위에서는 App.jsx에서는 버튼에 대한 구조를 잡아주되 그 구조에 대한 내용을 밖으로 TabButton.jsx로 뺐습니다.
그리고 이 둘이 어떻게 상호작용하는지 알아보았습니다. 특히 props를 가지고 말이죠!

이제 구조를 잡았으니 이벤트에 대해서 알아보겠습니다.

이럴수가..작성 했던게 날아갔네요ㅋㅋㅋㅋ

다음은 리액트 핵심-심화단계로 넘어갑니다..

아..임시저장을 안하다니..ㅠㅠ 주르르르르륵..