22-11-10-리액트(2)

React 사용 이유

바벨을 사용하면 최신 문법을 사용할 수 있다.
JSX는 바벨이 preset으로 호환을 해주는 것

페이지 구성 요소를 컴포넌트화 하기 위해 사용
대규모 프로젝트의 복잡도를 줄일 수 있다
유지보수가 가능하게 해준다.

싱글 페이지나 다수의 정적 페이지에서는 리액트 사용 권장하지 않음

• 변수형 {변수이름}
{} 중괄호 안에는 JavaScript 문법이 그대로 들어갈 수 있다.

const footer = (
    <div>
        <h1>footer</h1>
    </div>
);

const body = (
    <div>
        {footer}
    </div>
);

• 함수형 <함수이름>

function Footer() {
	return <h1>footer</h1>
}
const body = (
    <div>
        <Footer/>
    </div>
);

리액트의 특징 - 컴포넌트를 찍어내서 재사용할 수 있다.

const body = {
  	{Header('about','product')}
  	<Main name = 'lee', age = '10/>
	{Product()}
	{login ? 'one' : 'two'}

}

React Project 생성하기

• react-app 초기세팅을 편하게 해주기 위한 node 라이브러리

npx create-react-app my-app

npm으로도 설치가 가능하지만 세팅을 해주지는 않는다.

cd my-app
npm start

• index.js 는 App.js 에서 작성한 부분이 보여지게 되는 부분
  
• index.js
  

index.html에 index.js가 메인 페이지를 보여주게 하며 메인 페이지는 App.js 이다.
우리는 App.js를 다룹니다.

• 웹팩을 통해 document와 index.html이 연결된다.
  
  스크립트가 없지만 연결되어 있는 이유

JSX

function App() {
	return ();
}

위와 같은 문법을 사용하면 더 편리하게 컴포넌트로 분리하여 작성할 수 있다.
이 문법을 JSX(JavaScript + XML)이라고 한다.
HTML과 아주 비슷해 보이는 태그를 기반으로 하는 자바스크립트 구문

• 실행해보기

npm start

JSX 없이 React 사용해보기

const reactElement = React.createElement(
	'div',
  	{className: 'clName'},
  	'텍스트입니다.'
)

첫 번째 인자 : 엘리먼트 타입 정의
두 번째 인자 : 엘리먼트 프로퍼티 표현
세 번째 인자 : 여는 태그와 닫는 태그 사이에 들어가야 할 자식 노드 표현

=> 복잡한 React.createElement 코딩을 해결하기 위해 나온 것인 JSX

JSX로 React 사용해보기

const reactElement = <div className='simple-class'>테스트</div>
console.log(reactElement)

즉 JSX는 React 사용을 편하게 해주는 문법

최상위 부모요소는 1개

function App() {
	return (
        <div>
            <h1>hello world1</h1>
        </div>
   	)
}

JSX로 표현할 때에는 하나의 부모만 가질 수 있다.

주석 표현

function App() {
	return (
        <div>
            <h1>hello world1</h1>
            {/*주석 표현입니다.*/}
        </div>
   	)
}

태그에 클래스 넣기 + 스타일 적용

import './app.css';
function App() {
	return (
        <div>
            <h1>hello world1</h1>
            <h1 classNmae='new'>hello world1</h1>
        </div>
   	)
}

class 대신에 className 라고 작성한다.

• in-line 스타일 작성 시 주의할 점
  스타일 정의할 떄는 - 를 사용할 수 없다. (css 파일에서는 그대로 사용 가능)
  camelCase 를 사용하여 작성하기 (background-color -> backgroundColor)

import './app.css';

function App() {
  return (
		<div>
			<h1 style={{backgroundColor:"pink", color:"white"}}>안녕, 로봇 1호</h1>
			<div className="newClass"/>
		</div>
  );
}

export default App;

• 스타일도 변수에 넣어 사용할 수 있다.

import './app.css';
function App() {
  	const someStyle = {backgroundColor : 'pink'}
	return (
        <div>
            <h1 style={someStyle}>hello world1</h1>
            <h1 classNmae='new'>hello world1</h1>
        </div>
   	)
}
export default App;

Fragment

컴포넌트가 여러 엘리먼트를 return 할 때 최상위 부모 요소는 한 개의 태그만 존재해야 함
div 태그로 감싸기에는 시맨틱한 마크업을 작성할 수 없다.

=> <React.Fragment> 로 감싸준다.
=> Fragment 키워드 대신에 <> </> 를 사용

function App() {
  return (
		<>
			<h1>안녕, 1호!</h1>
			<h1>안녕, 2호!</h1>
		</>
  );
}

Props 파라미터

props는 컴포넌트를 만들 때 넣어줄 수 있는 속성들의 집합

function Licat(props) {
  return(
    <div>
      <h1>안녕, {props.name} 1호</h1>
      <h1>안녕, {name} 2호!</h1>
    </div>
  )
}

컴포넌트 파일 분리

import React from 'react'
import './파일위치입력'
function Hello() {...}
export default Hello;

리액트를 사용하겠다고 명시적으로 선언