React 시작하기

soma·2024년 2월 20일

React

목록 보기

2/10

1. 직접 리액트 연동하기

👆 index.html 생성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>리액트 시작하기</title>
    <link rel="stylesheet" href="/directConnectReact/styles.css">
</head>
<body>
    <h1>직접 리액트 연동하기</h1>

    <div id="root"></div> <!-- DOM Container(Root DOM Node) -->

    <!-- 리액트 가져오기 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- 리액트 컴포넌트 가져오기 -->
    <script src="/directConnectReact/MyButton.js"></script>
</body>
</html>

✌ styles.css 생성

h1 { 
    color: plum;
    font-style: italic;
}

👌 MyButton.js 생성

function MyButton(props) {
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        { onClick: () => setIsClicked(true) },
        isClicked ? 'Clicked' : 'Click here!'
    )
}

/*
script를 사용해서 컴포넌트를 가져왔다고 해도 컴포넌트가 화면에 보이는 것이 아니기 때문에  
=> React DOM에 render함수를 사용해서 컴포넌트를 DOM 컨테이너에 렌더링하는 코드
*/
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);

💻 결과

2. create-react-app

create-react-app은 React로 웹 애플릭케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태로 프로젝트를 생성해주는 도구

✅ Node.js / npm / VS code 설치

✅ 1. npx

execute npm package binaries
npm 패키지를 설치한 이후에 곧바로 실행해주는 명령어

// 사용법
$ npx create-react-app <폴더 이름>

---

// 👆 프로젝트 생성
$ npx create-react-app my-app

// ✌ 경로 변경 (change directory)
$ cd my-app

// 폴더 열기
$ code .

// 👌 개발 모드 실행
$ npm start

// 개발 모드 종료
$ ctrl + C