20220502 TIL

생활코딩 리액트 유튭

---

React의 핵심적인 역할
→ 사용자 정의 태그를 만드는 것.

React 시작하기

Node.js 설치
비주얼 코드로 폴더 연 후 npx create-react-app . 을 침
콘솔에서 . 는 현재 디렉토리를 의미함.

npm start를 치면 웹페이지가 뜨면서 React 개발 환경 시작

import App from './App';
→ . 이 현재 디렉토리란 뜻이므로, 같은 폴더에 있는 App.js 파일에서 가져온다는 뜻임.

React 배포판 만들기

터미널에 npm run build 입력
build 폴더가 생김

npx serve -s build를 쳐서 빌드한 것 실행해보기.
Node.js에서 build라는 폴더를 서버로 열어줌.

프로그래밍에서 정리 정돈이란, 이름을 붙여서 그 이름만 기억하는 것
웹개발에선 React가 그것을 도와줌.

사용자 지정 태그 만드는 법

function Header(){
  return (
  	<header>
  		<h1><a href="/">WEB</a></h1>
	</header>
    )
}

함수의 형태에 리턴값으로 html코드를 주면됨. 함수 맨앞자리 필히 대문자로 쓰는게 원칙.
이것을 React에서 컴포넌트라고 함

사용자 지정 태그 = 컴포넌트

html 태그에 속성이 있듯이 React 컴포넌트 태그에도 속성 붙이게 할 수 있음. 이걸 prop 기능이라 부름

<Header title="ReactTuto"></Header>

만든 컴포넌트에 속성을 달면...

function Header(props){
  return (
    <header>
      <h1><a href="/">{props.title} React</a></h1>
    </header>
  );
}

컴포넌트의 피라미터에 들어오게 됨.
{ }로 감싸면, 변수를 텍스트로 보여줄 수 있음

const topics = [
      {id:1, title:"html", body:"html is ..."},
      {id:2, title:"css", body:"css is ..."},
      {id:3, title:"js", body:"js is ..."}]

<Nav topics={topics}></Nav>

이런 식으로 속성에 변수 갖고오기 가능