[항해99 리액트 입문] 03~5. 리액트 앱 실행, Component 이해

posinity·2022년 11월 26일

항해99 리액트 입문

[항해99] 리액트 입문

목록 보기

3/11

03. Create React App

터미널에서 프로젝트 생성하기

ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요.

cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다.

yarn create react-app week-1 #프로젝트 생성!

프로젝트 실행하기

vscode로 만든 프로젝트 열기
새 터미널을 누르고 yart start 치고 엔터

04. Component Part 1

Component란 ?

컴포넌트란 블럭이자, 함수다! 화면을 구성하는 하나의 단위로, 레고로 만들어진 장난감이 있다고 하면 장난감을 이루는 레고의 역할을 함.
// App 컴포넌트
function App (){
	return <div></div>
}
컴포넌트 안에 html을 리턴하는 함수를 만들면 됌

app.js의 App 컴포넌트 > div태그를 리턴하는 App함수일 뿐!

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>항해99 리액트 입문주차 시작</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

Component 보는 법

컴포넌트 밖에서는 내가 필요한 파일을 import 하거나, 또는 export default 라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있습니다.

컴포넌트 안에서는 자바스크립트를 쓸 수 있는 부분이 있습니다. 여러분이 컴포넌트 안에서 어떤 자바스크립트 코드를 작성하고 싶다면 여기에다가 작성합니다.

그리고 return 을 기준으로 아랫부분에서는 HTML(정확히 말하면 JSX입니다. 나중에 배워요!) 을 작성할 수 있습니다. 여기에 작성한 html 코드와 값들이 화면에 보여집니다.

Component 만들 때 주의할 점

반드시 가장 첫번째 글자는 대문자로!
폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름 짓기.

과제

다음과 같이 구현하고 클릭 버튼을 누르면 alert창이 뜨게끔 하기

코드스니펫

 import React from 'react';
function App() {
  
	// <---- 자바스크립트 영역 ---->

  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;

리액트에서 이벤트 처리하기

<button onClick={active}>
<태그 이벤트={함수이름}>

리액트 공식문서 참고

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

//React에서
<button onClick={activateLasers}> //쌍따음표대신 중괄호 사용.
  Activate Lasers
</button>

완성

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->
  const active = () => {
    alert("클릭!"); // 화살표 함수 사용
  };

  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <h1>이것은 내가 만든 App컴포넌트입니다</h1>
      <button onClick={active}>클릭!</button>
    </div>
  );
}

export default App;

더 알아보면 좋을 키워드

클래스 컴포넌트는 무엇이고, 함수 컴포넌트와 무엇이 다른가?

05. Component Part 2

부모 컴포넌트와 자식 컴포넌트

컴포넌트는 다른 컴포넌트를 품을 수 있습니다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부릅니다.

// src/App.js
import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
} // 자식 컴포넌트로써 html태그를 리턴하고 있다

function App() { 
  return <Child />;
} // 부모 컴포넌트로써 Child 컴포넌트를 리턴하고 있다

export default App;

이렇게 코드를 작성하면, 화면에는 “나는 자식입니다” 라는 문장이 보여지게 될 것 입니다. 왜냐하면 이 파일에서 내보내진 (우리는 “내보내진” 이라는 것을 export default 라고 하기로 했습니다.) 컴포넌트는 App 컴포넌트 이기때문에 App 컴포넌트가 화면에 보여집니다. 하지만 App 컴포넌트는 Child 컴포넌트를 자식으로 삼고 있죠! 그래서 결국 자식 컴포넌트에 있는 “나는 자식입니다" 라는 문장이 보여지게 되는 것 입니다.

이렇게 만들어진 컴포넌트는 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있습니다. 앞으로는 “화면에 보여지게 하다"를 줄여서 Rendering 이라고 부르겠습니다. 그리고 이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식을 우리는 앞으로 JSX라고 부를 것 입니다.

정리
export default : 내보내진
Rendering : 화면에 보여지게 하다
JSX : 함수 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 방식

퀴즈

App.js에 3개의 컴포넌트를 만들고 할아버지, 엄마, 자식 컴포넌트를 만들어보고 서로 연결시켜봅시다.
App.js에 작성된 코드를 모두 지우고 새로 작성해봅시다.

import React from "react";

function Child() {
 return <div>나는 자식입니다</div>;
}

function Parents() {
 return <Child />;
}

function App() {
 return <Parents />;
}

export default App;

익숙해 질 때까지 반복적으로 손코딩을 해라!

더 알아보면 좋을 키워드

리액트에서 렌더링이란 무엇인가?

posinity

문제를 해결하고 가치를 제공합니다

이전 포스트

[항해99 리액트 입문] 01~2. 리액트 설명 및 기본 설정

다음 포스트

[항해99 리액트 입문] 03~5. 리액트 앱 실행, Component 이해