[2024~2025 동계모각코] 4회차 결과

---

34강

웹사이트 만들어볼 거임 (정적 + 동적)

리액트의 기초 개념 학습 예정

1. 컴포넌트, JSX, STATE
   1. 데이터 사용 방법
   2. 유저 이벤트 상호작용
   3. 상태! : 고정적 웹사이트 역동적으로 변화시키는데 중요
2. 앱 : 동적 | 정적

35강

컴포넌트 : 잠재적으로 재사용 가능한 구성 요소

리액트 개발자가 생성 가능

컴포넌트 결합으로 리액트 앱이 만들어짐

UI를 여러 컴포넌트 결합 >> 어느 웹사이트든 다 마찬가지임

헤더, 핵심, 상호작용 모두 컴포넌트로 볼 수 있음

(사용자에 따라 개념이 달라서 개수 다 다름)

• HTML, CSS, JS를 감싼다고 볼 수 있다
  • 복잡한 사용자 인터페이스를 쪼개서 관리 가능

접근이 쉽다가 매우 장점

• 비슷한 코드는 함께 저장됨
• 개발 과정 단순해짐
• 디자인, 개발 둘 다 개발 원칙 따름

36강

자료 모음

• https://github.com/academind/react-complete-guide-course-resources/blob/main/attachments/03 React Essentials/01-starting-project.zip
• https://codesandbox.io/p/sandbox/react-essentials-start-gsmr8r

초기 프로젝트 구축하기

• NPM RUN DEV : 개발 서버
  • 변경 사항 생길 떄마다 자동 업데이트

37강

index.html 파일

• 상당히 비어있음 (화면에 보이는 요소들이 없음)
  • 이거를 react가 담당할 거임
• js파일 로드 부분이있음
  • jsx는 무시

index.jsx를 보면

• 여전히 이미지처럼 화면에 보이는 건 없음
• app.jsx에서 뭘 불러옴

app.jsx

• 여기서 드디어 화면에 대한 요소를 불러옴

비표준의 js 문법을 써서 다들 확장자가 jsx임

브라우저에서는 사용 불가능! 다만 리액트 개발자로서 작성하면 브라우저에 도달하기 전에 어디서 바뀜 (브라우저에서 사용 가능한 코드로)

<두가지 규칙>

• 함수 제목은 대문자로 시작
• 함수에서 렌더링 가능한 값이 반환되어야 함
  • 렌더될 html 마크업이 반환되는 경우 많음

38강

보통 몇십, 몇백 개의 컴포넌트를 만듬

리액트 컴포넌트는 단순히 자바스크립트 함수와 같은 역할임

function Header()를 어케 실행?

<Header><Header/> 일케 !! app() 안에서 그냥 바로 사용

39강

js vs jsx

• 브라우저 지원 여부!!
• 빌드 프로세스에 따라 확장자 처리
• js만 사용하는 프로젝트도 있음 이 안에도 jsx 코드 있을 수 있음
• import App from ‘./App.jsx’이것도 되고 ‘import App from ‘./App’ 얘도 되고

40강

컴포넌트 처리 과정

App.jsx에서 App 컴포넌트를 내보냄

import, export는 js 특징임 ( 리액트 특화 아님 )

컴포넌트 함수에 jsx 코드 사용할 거임 우리 대부분

리액트 안에 리액트 넣기 가능!! by 렌더링 메소드

그래서 f12누르면 html말고 다른 것도 함께 존재하는 거임