[새싹x코딩온] 웹 개발자 부트캠프 과정 12주차 회고 | React

1. 들어가며

• 리액트 프로젝트를 만들어보고. props 사용해보기

2. React

React 프로젝트 생성하기

리액트 프로젝트에는 대문자 사용 불가능 하고, 단어 여러개 사용하고 싶으면 하이픈(-) 사용할 것

npx 를 사용하면 간단하게 프로젝트를 사용할 수 있다.

 

npx create-react-app test-app

 

test-app 부분은 내가 생성할 폴더 이름으로 생성하면 된다.

이런식으로 프로젝트 생섬됨!(이걸로 생성되는건 아니고 나는 여기서 프로젝트 구조 좀 바꾼거임)

package.json

package.json 도 이런식으로 만들어짐

 

프로젝트가 만들어졌으면 npm start 커맨드로 프로젝트를 실행할 수 있다.

프로젝트를 실행하면 기본 3000번 포트로 접속할 수 있다.(3000번 포트를 이미 사용중이면 3001 이런식으로 다음 번호 포트로 할당해줌!)

 

프로젝트를 생성하면 index.js에 다음과 같은 코드가 써져있다.

ReactDOM 은 가상DOM을 세팅하는 리액트  객체를 호출한다.

render() 는 요소를 변경하는 메서드다.

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

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

위의 코드를 해석하면

index.html에 있는 root 아이디를 가진 곳에 render 내에 있는 컴포넌트들을 불러와서 페이지를 렌더링한다는 것이다.

 

React Component

리액트 컴포넌트는 HTML 요소를 반환한다.

독립적이고 재사용이 가능한 코드집합이다. 

리액트의 컴포넌트의 종류로는 클래스형 컴포넌트와 함수형 컴포넌트가 있다.

 

1) 클래스형 컴포넌트

클래스형 컴포넌트는 클래스를 이용해서 만드는 컴포넌트다. 

extends React.Component 라는 상속문이 포함되어야 하며, render() 메서드가 필수다.

import React from 'react';

class SpiderMan extends React.Component{
    // render() 메서드 사용
    render(){
        // html 태그 리턴
        return(
            <>
                <h2>안녕! 나는 스파이더맨!</h2>
                <h3>거미줄 슝슝</h3>
            </>
        )
    }
}

export default SpiderMan;

 

 

2) 함수형 컴포넌트

함수형 컴포넌트는 함수를 사용해서 만드는 컴포넌트로, 함수표현식 및 함수선언문 둘 다 사용가능하다.

클래스형 컴포넌트보단 짧고 직관적이고 사용방법이 더 간단하다. 

function IronMan(){
    return(
        <>
            <h2>Hi! I AM IRONMAN</h2>
            <h3>난 돈이 많아!</h3>
        </>
    )
}

export default IronMan;

 

저 만들어진 컴포넌트들을 App.js 에서 불러와서 렌더링 할 수 있다.(물론 index.js 파일에 App.js 파일이 있고, 컴포넌트로 불러와져야 함)

import './App.css';
import IronMan from './IronMan';
import SpiderMan from './SpiderMan';

function App() {
  return (
    <div className="App">
      <SpiderMan />
      <IronMan />
    </div>
  );
}

export default App;

 

그럼 이런 결과가 나온다!

 

props

Properties(속성들) 를 줄인 표현으로 컴포넌트의 속성을 설정할 때 사용하는 요소이며, 컴포넌트끼리 값을 전달하는 수단이다.(일종의 전달변수?)

 

props 를 사용하기 위해서는 일단 자식컴포넌트에 props 를 설정해준다.

function Favorite(props){
  return (
    <ul>
      <li>내가 좋아하는 색은 {props.color}</li>
      <li>내가 좋아하는 음식은 {props.food}</li>
      <li>내가 좋아하는 동물은 {props.animal}</li>
      <li>내가 좋아하는 영화는 {props.movie}</li>
    </ul>
  )
}

 

그리고 부모컴포넌트에서 props 의 값을 전달해준다.

function App() {
  return (
    <div className="App">
      <Favorite color="분홍색" food="치킨" animal="토끼" movie="인사이드아웃" />
      <Favorite color="하늘색" food="비빔면" animal="고양이" movie="미니언즈" />
    </div>
  );
}

 

그러면 결과가 이렇게 나온다.

컴포넌트의 가장 큰 장점은 재사용성이고, props 에서 각각 값을 달리 전달해줘서 코드를 반복하면서도 값을 다르게해서 작성할 수 있다. 

 

참고로 위의 예시는 함수형 컴포넌트의 props 이고 클래스형 컴포넌트의 props는 저거보다 간단하지는 않았다.

(요즘엔 그래도 함수형 컴포넌트로 많이 쓴다고 하니.. 다행인지..?

클래스형 컴포넌트의 props는 저기서 this 키워드를 더해줘야 한다.

class Cafe extends React.Component {
  render(){
    return (
      <>
        <p>내가 좋아하는 음료수는 {this.props.drink}</p>
        <p>내가 좋아하는 디저트는 {this.props.dessert}</p>
      </>
    )
  }
}

 

function App() {
  return (
    <div className="App">
      <Cafe drink="밀크티" dessert="당근케이크" />
      <hr/>
      <Cafe drink="자몽에이드" dessert="에그타르트" />
    </div>
  );
}

그러면 결과는 이렇게 나온다.

 

3. 마치며

리액트의 간단한 기본 문법을 공부했다.

리액트를 하면서 느낀건데 컴포넌트를 조각조각 만들고 붙이고 이러는 과정이 꼭 레고같다.

어렸을 때 레고를 좋아했는데 코드로 레고를 하는 느낌이라 너무 재미있다.

 

4. Reference

1. 코딩온 강의 교안 및 실습