개발일지 20221206 리액트 입문 강의 시작!

준비물)

Chrome크롬 브라우저

VScode (https://code.visualstudio.com/)

git (https://git-scm.com/downloads)

Node.js (https://nodejs.org/ko/) : terminal(mac), powershell, git bash에 node -v 를 입력하고 설치확인(버전확인)

yarn 설치 : npm install -g yarn 를 입력 후 yarn -v 로 설치확인(버전확인)

# yarn으로 패키지 설치하는 법

yarn add [설치할 패키지 이름]

# 예시: yarn add react-router-dom

 

 

리액트 시작하기)

* CRA (Create-react-app)란?

: 리액트 프로젝트를 하기 위해 필요한 여러 프로그램을 자동으로 설치해주는 도구

 

1. CRA로 프로젝트 생성하기

git bash 또는 powershell 실행 후 (mac은 terminal)

ls # 현재 위치 확인

cd 폴더이름 # 프로젝트를 시작하고 싶은 폴더로 들어가기

yarn create react-app week-1 # 프로젝트(week-1 이라는 폴더) 생성

2. 프로젝트 실행

cd week-1 # week-1 폴더로 이동

yarn start # 프로젝트 실행

 

 

Component란?

- React를 이용해서 하나의 큰 어플리케이션을 만들려고 할 때 컴포넌트라는 블록을 조립해서 만들고 싶은 형태로 구현한다

- HTML 태그를 리턴하는 함수

// 예시
function App() { return <div> ... </div> }

- component를 외부에서 사용할 수 있게 export를 해야 한다

//예시
export defaul App;

- export된 component를 외부에서 가져와 사용하려면 import하기

//예시
import React from "react";

 

example)

//컴포넌트 밖, 내가 필요한 파일을 가져오는 영역
import React from "react";

const App=()=> {
  //자바스크립트를 쓸 수 있는 영역




  return (
    <div>
      {/* JSX를 쓸 수 있는 영역(JSX : React에서 HTML을 사용하기 위한 문법) */}
    </div>
  );
}
//내가 만든 컴포넌트를 밖으로 내보내는 영역
export default App;

주의할 점

- Component를 만들 때는 반드시 대문자로 시작해야 함 (ex. App())

- 폴더는 소문자로 시작하는 CamelCase로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 CamelCase로!

 

 

React와 HTML 차이?

// HTML

<button onclick="activateLasers()">
  Activate Lasers
</button>


// React

<button onClick={activateLasers}>
  Activate Lasers
</button>

 

 

리엑트 사용 예시)

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->
  const handleClick = () => {
    alert("클릭");
  };
  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <span>이것은 내가 만든 App컴포넌트 입니다</span>
      <button onClick={handleClick}>클릭!</button>

      {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;

 

 

 

 

 

problem)

git bash에서 yarn으로 프로젝트를 생성하기 위해 yarn create react-app week-1를 입력했는데 계속 오류가 떴다

강의자료에서 제시한 해결방법

1. NVM 설치

2. nvm install 16.18.0 (사용할 버전 설치)

3. nvm use 16.18.0 (이 버전을 사용하겠다는 의미)

4. node --version (버전 확인으로 설치 확인)

 

하지만 강의자료에서 위와 같이 제시한 해결 방법으로 해결하려고 했으나 모두 실패했고, 한 시간의 사투 끝에 그냥 node.js를 새로 설치했다

깔끔하게 해결됨ㅎㅎ...해결책도 안 보이고 잘 모르겠을 땐 처음부터 다시 해 보기ㅠ