React Next.js 기초 튜토리얼 (+Node.js), 세팅을 마쳤으니 개발을 시작하지 _실전 웹 애플리케이션 개발 (4)

안녕하세요

오늘도 개발하기 딱 좋은 날씨입니다.

거짓말입니다.

그런 날은 없습니다.

 

그래도 해야죠

나는 어른. 이닉가.

---

리액트 시작하기

리액트-타입스크립트 폴더 생성

# 'react-sample' 이라는 이름의 타입스크립트+리액트 프로젝트 생성
$ npx create-ract-app@latest react-sample --template typescript

# 프로젝트 폴더로 이동
$ cd react-sample

# 돌리기
$ npm run start

Typescript 기본 원리

src/index.tsx ---(Transport)---> public/index.html

리액트 컴포넌트

Component : 생성

폴더와 코드 생성

 

FYI. 코드를 터미널로 생성하려면?

-> code Hello.tsx

 

[ Compent : Hello.tsx ]

const Hello = () => {
  const onClick = () => {
    alert('hello');
  };

  const text = 'Hello, React';

  // Alert 기능
  return <div onClick={onClick}>{text}</div>;
};

export default Hello;

 

[ Accept : index.tsx ]

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import Hello from './components/Hello';

ReactDOM.render(
  <React.StrictMode>
    <Hello />
  </React.StrictMode>,
  document.getElementById('root')
);

 

[ Result ]

Component : JSX 에서의 HTML 태그

• JS 주석 : {/* 주석을 써봐요 */}
• 기존 HTML 과 다른 문법
  • class -> className
  • for -> htmlFor 
  • onchange -> onChange

# 기존 HTML
<label for="name"> 이름 </label>
<input id="name" class="input-name" type"text">

 # -> JSX
 <label htmlFor="name"> 이름 </label>
<input id="name" className="input-name" type="text">

• style
  • 객체 키 : 캐멀 케이스 (e.g. backgroundColor)
  •  첫번째 {} : 속성에 문자열 이외 값 삽입 / 두 번째 {} : 객체 나타내기 위함
• Compoent 이름 : 파스칼 케이스 (e.g. const Text  = ...) 

[ EX. Name.tsx ] 

import React from 'react'

// return 이름 입력을 위한 텍스트 박스
const Name = () => {
    // Input : OnChange Function
    const onChange = (e: React.ChangeEvent<HTMLInputElement>)=> {
        console.log(e.target.value)
    }


    return (
        <div style={{padding: '16px', backgroundColor: 'grey'}}>
            <label htmlFor="name"> 이름 </label>
            <input id="name" className="input-name" type="text" onChange={onChange} />
            
        </div>
    )
}

export default Name;

 

[ Result ]

 

더 많은 컴포넌트 예제는 아래 깃허브 레포지터리를 참고해주세요 ~_~

 

[ ReadMe.md ]

GitHub - fiveyuna/Study-React-Next.js-TypeScript: 타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이

 

[ Components folder ]

Study-React-Next.js-TypeScript/react-sample/src/components at main · fiveyuna/Study-React-Next.js-TypeScript