비트 컴퓨터 [React] - ①

1. React

• 유저 인터페이스를 만드는 데 사용되는 오픈 소스 자바스크립트 라이브러리이다.

  • 메타에서 개발하였다.

• 프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다.

  • npm 패키지 다운로드 수가 React가 가장 많다.

• SPA을 전제로 한다.

  • Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다.

• 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다.

  • 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하다.

  • React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리잡았다.

• 타입스크립트나 Sass 같은 언어도 지원한다.

2. 환경 설정

1) Node.js

• npm을 포함하고 있다.

  • 즉 바로 사용 가능하다.

2) VSCode

여기까지 설정은 여기로

3) React

npm install -g create-react-app


...

create-react-app --version

3. 사용해보기

cmd에서 프로젝트 생성 (CRA)

create-react-app test01

cd test01

npm start

VSCode에서 프로젝트 생성

create-react-app test02

[에러 발생]

Get-ExecutionPolicy
Set-ExecutionPolicy RemoteSigned

cd test02
npm start

index.js

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

• Strict 모드는 애플리케이션 내의 잠재적 문제를 알아내기 위한 도구로, 나중에 배울 생명주기 함수를 여러 번 실행하는 원인이 되므로 사용하지 않는다.

App.js

수정 시 자동 리프레시가 일어난다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Reactjs code snippets

4. React 구조

클래스형 컴포넌트

rcc + Enter

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default App;

rcjc + Enter

class componentName extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

함수형 컴포넌트

rsc + Enter

import React from 'react';

const componentName = () => {
  return (
    <div>
      
    </div>
  );
};

export default componentName;s

rsf + Enter

import React from 'react';

function App(props) {
  return (
    <div>
      
    </div>
  );
}

export default App;

• App.js

import React from 'react';

function App() {
  return (
    <div>
      <h1>안녕 난 아현이야 :)</h1>
    </div>
  );
}

export default App;

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>안녕 난 아현이야 :)</h1>
    </div>
  );
}

export default App;

[자동 저장]

jsx 주석

import React from 'react';

function App() {
 
  return (
    <div>
      {/* jsx 주석!!! */}
      <h1>start React 200</h1>
      <p>HTML 적용하기</p>
    </div>
  );
}

export default App;

javascript 코드

• 함수형

import React from 'react';

function App() {
  //컨트롤러
  console.log('여기 javascript 코드@@@@');

  //뷰
  return (
    <div>
      {/* jsx 주석!!! */}
      <h1>start React 200</h1>
      <p>HTML 적용하기</p>
    </div>
  );
}

export default App;

• 클래스형

import React, { Component } from 'react';

class App extends Component {
  name = '호랑이';
  render() {
    //컨트롤러
    console.log('javascript 코드 @@@@');
    
    return (
      <div>
        <h1>안녕안녕</h1>
      </div>
    );
  }
}

export default App;

5. css 적용

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

• App.js

...
import './App.css';
...

• App.css

div{
  background-color: rgb(162,127,243);
  color: rgb(255,255,255);
  padding: 40px;
  font-family: 고딕;
  text-align: center;
}

h1{
  color: white;
  background-color: #2EEF2E;
  padding: 10px;
  font-family: 궁서;
}

6. 컴포넌트 사용

App.js

//선택적으로 가져올 때, {} 안에 지정해준다.
import React, { Component } from 'react';
import './App.css';

//Bpp.js 파일에서 export default로 되어 있는 컴포넌트 가져오기
//가져온 컴포넌트 이름은 Tiger라는 이름으로 사용
import Tiger from './Bpp';

class App extends Component {
  render() {
    return (
      <div>
        <Tiger/>
        <h1>하위👻</h1>
        <Tiger></Tiger>
      </div>
    );
  }
}

export default App;

Bpp.js

import React, { Component } from 'react';

class Bpp extends Component {
    render() {
        return (
            <div>
                <h1>요건 Bpp 컴포넌트</h1>      
            </div>
        );
    }
}

export default Bpp;

컴포넌트 내부에 다른 컴포넌트

• App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    console.log('sample');
    
    return (
      <div>
        <Bpp/>
        <h1>App입니다!</h1>
        <Bpp></Bpp>
      </div>
    );
  }
}

class Bpp extends Component {
  render() {
    return (
      <div>
        <h1>Bpp입니다!</h1>
      </div>
    );
  }
}

export default App;

✅ import

참고

• import 키워드 다음에 식별자(사용할 변수, 함수, 클래스)를 작성합니다.

  • from 키워드 다음에 불러올 모듈의 경로를 작성합니다.

✅ export

1. 변수, 함수, 클래스를 작성 후 export 키워드를 작성

   • import를 작성한 line에서 중괄호 {} 를 제거할 경우 에러가 발생합니다.

2. 변수, 함수, 클래스 작성과 함께 export 키워드를 붙이는 방법입니다.

3. as 키워드를 사용하여 별칭을 붙여서 내보냅니다.

4. default 키워드를 붙여서 내보냅니다.

//1.

const Page001 = () => {
  return (
    <div>
      <h1>Page001 컴포넌트</h1>
    </div>
  );
};

// export Page001로 작성할 경우 에러가 발생합니다.
export { Page001 };


//2.

export const Page002 = () => {
  return (
    <div>
      <h1>Page002 컴포넌트</h1>
    </div>
  );
};

//3.

const Page404 = () => {
  return (
    <div>
      <h1>페이지가 존재하지 않습니다.</h1>
    </div>
  );
};

export { Page404 as ErrorPage };


//4.

export default function Page003() {
  return (
    <div>
      <h1>Page003 컴포넌트</h1>
    </div>
  );
}


const Page004 = () => {
  return (
    <div>
      <h1>Page004 컴포넌트</h1>
    </div>
  );
};

// default 키워드를 사용하는 경우 중괄호 {} 없이 export 가능합니다.
export default Page004;