본문 바로가기
  • 인공지능
  • 블록체인
  • 정보보안
코딩 알로하 :: one/react.js

리액트 To-do 리스트 만들기 (2탄)

by nathan03 2022. 6. 1.
반응형

# VScode 
- Visual Studio Code는 마이크로소프트에서 만든 오픈 소스 코드 편집기이다. 미려한 디자인과 강력한 성능을 모두 갖추고 있어서 많이 사용하고 있다. 2021년 프로그래머스 설문조사에서도 선호도 1위를 차지했다. 

# VSCode 설치  
https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

# 기본 설정
- VSCode 자체 설정 2가지를 변경한다. (Auto Save, Bracket Pair Colorization)
- Auto Save : 코드가 변경된 다음 자동으로 저장해주는 설정이다. 
- Bracket Pair Colorization : 코드의 괄호끼리 색상을 맞추어주는 설정이다. 


# 확장 프로그램 설치
- Prettier : 자동으로 코드의 스타일을 관리해주는 도구이다. (윈도우 단축 옵션 : Alt + Shift + F)
- ESLint : 자바스크립트의 문법을 확인해주는 도구이다.  

 

# NodeJS 설치 

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

# npm 과 npx 의 차이점
- npm : Package Manager 특정 패키지를 설치, 제거, 업데이트하는 도구 
- npx : Package Runner npm@5.2.0 이상에서 사용할 수 있는 npm의 CLI 도구, npm 레지스트리에 올라가 있는 최신 버전의 패키지들을 사용해 해당 명령어를 실행시키고, 의존 패키지들을 삭제해줌


# 리액트를 컴퓨터에 설치하기 (Create React App(CRA) 으로 앱 만들기)
cmd 터미널을 열고, 리액트 프로젝트를 만들 폴더에서 npx 를 이용해 새로운 리액트 프로젝트를 생성한다. 
create-react-app 은 Dev server, WebPack, Babel 과 같은 도구들을 포함하고 있기 때문에 쉽고 빠르게 새로운 리액트 프로젝트를 만들수 있다. 
- Webpack : 여러개로 나누어진 소스코드를 하나로 묶어주는 자바스크립트 번들 도구 
- Babel : JSX 와 같은 최신 자바스크립트 문법을 이전 버전에서도 호환되도록 컴파일해주는 도구 

npx create-react-app sample-react-app

 

# 폴더 구조
- node_modules : 서드파티 노드 모듈 
- public : 배포 시 누구나 접근할 수 있는 파일들 
- src : 기본 컴포넌트 및 다른 소스 코드 
- package.json : 프로젝트의 메타데이터 (각종 라이브러리 버전 관리)

# Sample app 실행하기 
VSCode 터미널에서 아래 명령어를 통해 샘플 앱을 실행해보자. 

npm start (localhost:3000 실행)

그러면 아래와 같은 메시지가 콘솔에서 출력되고, 브라우저에서 샘플 앱이 실행된다. 

아래 메시지에서도 알수 있듯이 localhost의 3000번 포트에서 개발 서버가 실행되고, 개발 서버에서 index.html 을 서빙하고 있다. index.html 파일을 자세히 들여다보면, 리액트 관련 코드가 없는 것을 확인할수 있다. 

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>

리액트는 <div id="root"></div>의 아래에 DOM을 삽입하게 된다. 
브라우저에서 localhost:3000 번 주소를 입력하면 아래와 같이 앱이 실행된다. 

# App.js 소스 변경하기 

// 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>
          Hello React!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

# 실행 결과

# 함수형 컴포넌트와 클래스 컴포넌트의 차이점 
리액트에서는 컴포넌트를 클래스형과 함수형 두 가지로 정의할수 있다. 

< 함수형 컴포넌트 >

import React from "react";

function App() {
  return <h1>Hello, React!</h1>;
}

export default App;

 

<클래스형 컴포넌트 >
클래스형 경우, ES6 class 를 사용하여 컴포넌트를 정의할수 있다. React.Component 클래스를 상속받는 App 클래스를 다음과 같이 만들수 있다. 클래스형 컴포넌트는 반드시 render()함수가 있어야 한다. 그리고 render()함수에서는 반드시 JSX를 리턴해야 한다. 

import React from "react";

class App extends React.Component {
  render(){
    return <h1>Hello, React!</h1>;
  }
}

export default App;

Reat 의 관점에서 볼때 함수형/클래스형 컴포넌트는 동일하다. 하지만, 최신 리액트에서는 
    - 클래스 사용법이 어렵고 복잡하기 때문에 
    - 함수형 컴포넌트와 리액트 Hook 의 조합이 더 간편하기 때문에
    - 코드가 훨씬 간결하기 때문에 

함수형 컴포넌트를 훨씬 더 많이 사용한다. 

< 주의!! >
컴포넌트의 이름은 항상 대문자로 정의해야한다. 예를 들어 <div />는 HTML div 태그로 인식되지만, <Welcome />은 컴포넌트로 인식된다. 

# export 
해당 모듈에서 기본적으로 내보낼 값 하나를 정한다. 만일 다른 모듈에서 해당 모듈을 import 한다면 export default 에 정의된 객체가 참조된다. 이때 import 되는 객체의 이름은 임의로 정할 수 있다. 

export default App; 

-->
import App from "App.js"
import MyApp from "App.js"

만일 한개의 객체가 아닌, 여러 개를 내보내고 싶은 경우 아래와 같이 할수 있다. 이때 다른 모듈에서는 원하는 값만 가져올수 있다. 

export {Var1, Var2};

-->
import {Var1} from "App.js"
import {Var1, Var2} from "App.js"


# props 
Props는 Properties 의 줄임말로, 어떤 값을 컴포넌트에 전달할 때 사용한다. Hello라는 컴포넌트에 name 이라는 변수를 전달해주고 싶다면 다음과 같이 하면 된다. name 이라는 props에 "indo" 라는 값을 전달하고 있다. 

// App.js
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name= "indo" />
  );
}

export default App;

Hello 컴포넌트에서는 다음과 같이 props에 전달된 값을 사용할 수 있다. 

// Hello.js
import React from 'react';

function Hello(props) {
    return <h1>Hello, {props.name}</h1>
}

export default Hello;

props라는 파라미터에 속한 변수를 props.name으로 참조하고 있는 것을 볼 수 있다. 

# 비구조화 할당과 기본값 
파라미터를 참조할 때마다 props. 를 붙이지 않도록 "비구조화 할당"을 사용하면 더 직관적으로 파라미터를 이해할수 있어 편리하다. 아래와 같이 props 의 비구조할당을 사용해서 name 만 사용하여, name 만 읽어올수 있게 할수 있다. 

// Hello.js
import React from 'react';

function Hello({name}) {
    return <h1>Hello, {name}</h1>
}

export default Hello;

만일 특정 파라미터의 기본값을 설정하고 싶다면 defaultProps를 사용하면 된다. (예: 파라미터:값)

// Hello.js
import React from 'react';

function Hello({name}) {
    return <h1>Hello, {name}</h1>
}

Hello.defaultProps = {
	name = "React!"
}

export default Hello;

# 실수하기 쉬운 props 사용법
props를 사용할 때 반드시 기억해야하는 점은, props는 "부모 컴포넌트(예: App.js)" 에서 "자식 컴포넌트(예: Hello.js)"로 보내주는 값이라는 점이다. 따라서 부모 컴포넌트가 보내준 값을 자식 컴포넌트에서 변경하더라도, 원래 부모에서 보내준 값이 바뀌지 않는다. 

// App.js
import Hello from "./Hello";

function App() {
	return <Hello name = "React!" />;
}

export default App;

Hello.js 에서 name 을 바꾸더라도 App.js name 이 바뀌지 않는다. 

// Hello.js
import React from 'react';

function Hello({name}) {
    return <h1>Hello, {name}</h1>
}

Hello.defaultProps = {
	name = "React!"
}

export default Hello;

# 감싸는 컴포넌트를 만드는 경우, props.children 사용하기 
Wrapper 컴포넌트를 만들고, App.js에서 Wrapper 컴포넌트 밑에 두개의 Hello 자식 컴포넌트를 구성해서 렌더링을 하려면 props.children을 받아 와야 한다.  

// App.js
import React from 'react';
import Hello from './Hello';
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name= "indo" />
      <Hello name= "indo" />
    </Wrapper>
  );
}

export default App;
//Wrapper.js

import React from "react";

function Wrapper({children}){
    const style = {
        border: '1px solid red',
        padding: '12px',
    };

    return <div style={style}>{children}</div>
}

export default Wrapper;

 

반응형
저작자표시 비영리 동일조건

'코딩 알로하 :: one > react.js' 카테고리의 다른 글

리액트 To-do 리스트 만들기 (6탄)  (0) 2022.06.01
리액트 To-do 리스트 만들기 (5탄)  (0) 2022.06.01
리액트 To-do 리스트 만들기 (4탄)  (0) 2022.06.01
리액트 To-do 리스트 만들기 (3탄)  (0) 2022.06.01
리액트 To-do 리스트 만들기 (1탄)  (0) 2022.06.01

관련글

댓글

티스토리툴바