설치와 실행

1. React 앱 설치를 해줍니다

npx create-react-app 앱이름

2. 앱을 실행해줍니다.

npm start

• 자동으로 localhost:3000으로 앱 실행

3. src 폴더의 index.js에서 화면에 보여지는 부분을 편집할 수 있습니다.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    //<h1>hello world</h1>
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

4. 전역 폴더로 .vscode를 만들고, 그 안에 settings.json파일을 생성하여 javascript를 넣어줍니다.

{
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }
}

5. 작업 폴더 안에 .prettierrc.jason 파일 생성 후 javascript 프리티어를 설정해줍니다.
   예시:

{
    "trailingComma": "es5",
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2
}

6. 프리티어 파일을 프리티어 extenstion settings로 간 후 프리티어 config 경로에 해당 파일명을 적어줍니다.
   

7. src 폴더에 Test-Clock.js 컴포넌트를 하나 생성하여 import를 해봅니다.

function Clock() {
    return (
        <div>
            <h1>현재 시간은 {new Date().toLocaleTimeString()} 입니다.</h1>
        </div>
    )
}

//컴포넌트 내보내기
export default Clock;

import Clock from "./Clock";

//const root = ReactDOM.createRoot(document.getElementById("root")); 아래에 적어줍니다.

setInterval(() => {
    root.render(
        //react virtual dom은 변경된 부분만 update
        //전체가 아니라 시간 부분만 변경 되고 있음
    <React.StrictMode>
        <Clock />
    </React.StrictMode> 
    )
}, 1000)

default export와 named export

컴포넌트를 만들면 외부에서 사용할 수 있도록 export해줘야합니다. 이때 epxort하는 방법에는 두 가지가 있습니다. 둘 중 어느 것이 더 좋다, 나쁘다라고 할 순 없고, 상황에 따라 적절히 사용하면 되는 것 같습니다.

1. default export

하나의 파일에서 하나의 변수, 클라스, 또는 함수를 가져올 수 있습니다.

function Login(){
  const title = "Welcom to React World"
  return(
    <div className='Login'>
      <h1>{title}</h1>
      <p>아이디: <input type='text' className='id'></input></p>
      <p>비밀번호: <input type='password' className='pw'></input></p>
    </div>
  )
} 

export default Login;

그래서인지 아래 예시처럼 import할 때는 본래 이름과 다르게 작성해도 괜찮습니다. (but, 변수 선언시 사용하는 const, var, let 등은 사용할 수 없습니다.)

// import Login from "./App";
import ReactLogin from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
  		// <Login/>
        <ReactLogin />
    </React.StrictMode>
);

❌ import let ReactLogin from './App'

2. named export

한 파일 안에서 여러 변수, 클라스, 또는 함수를 가져올 수 있습니다.

class MyAnimall extends Component {
  render(){
    const animalName = "커크";
    const animalType = "사모예드"
    const sytles = {
      textDecoration: "underline",
    }
  return(
    <div className='MyAnimall'>
      <p>제 반려 동물의 이름은 <span style={sytles}>{animalName}</span>입니다.</p>
      <p><span style={sytles}>{animalName}</span>은 <span style={sytles}>{animalType}</span>입니다.</p>
    </div>
  )
}
}

function Login(){
  const title = "Hello World"
  return(
    <div className='Login'>
      <h1>{title}</h1>
      <p>아이디: <input type='text' className='id'></input></p>
      <p>비밀번호: <input type='password' className='pw'></input></p>
    </div>
  )
}

export {MyAnimall, Login};

default와 달리 export에서 적은 이름과 동일하게 작성해야 오류가 발생하지 않습니다.

import {Login, MyAnimall} from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <Login />
        <br />
        <br />
        <MyAnimall />
    </React.StrictMode>
);

"다른 이름으로 바꾸고 싶은데 할 방법이 없나요?🤔?"

🙂아니요! as를 사용하면 가능합니다!

import {Login as LoginSet, MyAnimall as AnimallInfo} from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <LoginSet />
        <br />
        <br />
        <AnimallInfo />
    </React.StrictMode>
);

as를 사용하면 한번에 import하는 것도 가능합니다.

import * as APP from "./App";

다만, 작성할 때 아래와 같이 객체분할 해서 작성해줘야 오류가 나지 않습니다.

<APP.Login />
<APP.MyAnimall />

---

이렇게 리액트를 배우기 시작했는데, 전에 배웠던 함수형 Class가 나오니 괜히 반가운 반면 함수형 Class를 어떻게 선언했었는지 잘 기억나지 않아 전에 정리해뒀던 함수형 Class를 복습해야겠다는 생각이 들었습니다.

그리고 React는 실무에서 정말 많이 사용되고 있는만큼 제대로 배우고 싶은 마음에 DeepDive 책을 구매했습니다. React DeepDive에는 next.js까지 있어서 더 좋은 것 같습니다. 둘 다 열심히 배워서 다음 프로젝트 때 제가 팀원들을 이끌어갈 수 있을 만큼 실력이 쌓이면 좋겠습니다.