AWS BACK DAY 57. React 개발 시작하기: JSX, 프로젝트 생성, 라이브러리 설치 및 자동완성 확장 프로그램 사용

이강용·2023년 3월 23일

React

목록 보기

1/4

nodejs

nodejs 설치

React

React 설치

작업 공간(workspace) 에 react 폴터 생성

-> Visual Studio Code -> 새폴더 (workspace)에 만들었던 react 폴더 클릭

-> 터미널 창 Open

입력

npx create-react-app hello_react

-> 새폴더 -> hello_react -> 폴더 선택

npm start

src -> index.js 부터 시작 !

<App /> : 하나의 컴포넌트

JSX 란?

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

function App() {
  return (
  <>
    <div>
    {/** JSX 주석 
      1. JSX는 javascript 함수 return에 HTML 태그 또는 다른 component들을 표현할 수 있는 표현식
      2. 하나의 JSX 즉, return에는 하나의 태그 묶음만 들어올 수 있다.
      3. <></> 비어있는 태그를 열고 닫으면 실제 렌더링 시에 무시된다.
  */}
    </div>
    <div>
      
    </div>  
  </>
  );
}

export default App;

순서

Hello.js > App.js > index.js

Hello.js

import React from "react";


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


export default Hello;

App.js

import Hello from "./components/Hello";



function App() {
  return (
  <>
    <div>
    {/** JSX 주석 
      1. JSX는 javascript 함수 return에 HTML 태그 또는 다른 component들을 표현할 수 있는 표현식
      2. 하나의 JSX 즉, return에는 하나의 태그 묶음만 들어올 수 있다.
      3. <></> 비어있는 태그를 열고 닫으면 실제 렌더링 시에 무시된다.
  */}
    </div>
    <div>
      <Hello />
    </div>  
  </>
  );
}

export default App;

index.js

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

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

// 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();

Button.js

import React from "react";



function Button(props) {

    return(
        //react에서는 component 하나가 dom ! 
        <button onClick={props.handlerClick}>이름전달</button>
    );
}

export default Button;

UserInfo.js

import React from "react";

const user = {
    username : "jinil",
    email : "junil@gmail.com"
};

function UserInfo(props) {
    return(
        <>
            <p>사용자이름: {user.username}</p>
            <p>이메일:{user.email}</p>
            <p>전화번호:{props.phone}</p>
            <p>주소:{props.address}</p>
            <p>이름: {props.name}</p>
        </>
    );
}

export default UserInfo;

App.js

import { useState } from "react";
import Hello from "./components/Hello";
import Button from "./components/Button";
import UserInfo from "./components/UserInfo";





function App() {
  const [name,setName] = useState("");

  const handlerClick = () => {
    console.log("이름전달 버튼 클릭");
    setName("김준일");
  }

  return (
    <>
      <div>
      {/** JSX 주석 
        1. JSX는 javascript 함수 return에 HTML 태그 또는 다른 component들을 표현할 수 있는 표현식
        2. 하나의 JSX 즉, return에는 하나의 태그 묶음만 들어올 수 있다.
        3. <></> 비어있는 태그를 열고 닫으면 실제 렌더링 시에 무시된다.
    */}
      </div>
      <div>
        <Hello />
        <Button handlerClick = {handlerClick} />
        <UserInfo name = {name} phone = "010-1234-5678" address = "부산 동래구" />
      </div>  
    </>
  );
}

export default App;

새 프로젝트 만들기

workspace 경로 ctrl+c

cmd창 : cd C:\junil\AWS_LKY\workspace\react

npx create-react-app props_study

npm start

비구조화 할당 (구조분해)

비구조화 할당 참고 사이트

App.js

import PropsTest from "./components/PropsTest";
import UserInfo from "./components/UserInfo";

function App() {

  const userList= [
    {username: "aaa", name:"AAA", email: "aaa@gmail.com"},
    {username: "bbb", name:"BBB", email: "bbb@gmail.com"},
    {username: "ccc", name:"CCC", email: "ccc@gmail.com"},
    {username: "ddd", name:"DDD", email: "dddd@gmail.com"}
  ];
  

  return (
    <>
      <PropsTest username ="aaa" 
        name = "김준일" 
        email = "aaa@gmail.com" 
        handlerClick={() => console.log("클릭함!!!")}
      />
      {['김준일','김준이','김준삼']}
      {userList.map(user => 
        (
          <UserInfo username={user.username} name={user.name} email={user.email} />
        )
      )}
    </>
  );
}

export default App;

UserInfo.js

import React from "react";

function UserInfo({ username = "" , name = "", email = "" }) {
    
    const style = {
        marginBottom: "15px",
        border: "1px solid #dbdbdb",
        padding: "20px"
    }
    
    return(
        <div style={style}>
            <input type="text" defaultValue ={username} />
            <input type="text" defaultValue ={name} />
            <input type="text" defaultValue ={email} />
        </div>
    );
}

UserInfo.defaultProps = {
    username: "빈값",
    name: "빈값",
    email: "빈값"
}

export default UserInfo;

PropsTest

import React from "react";


function PropsTest({ username, name, email, handlerClick }) {
    const user = {
        username,
        name,
        email
    };

    // const {username, name, email} = user;

    
    const testPrint = ({ username, name, email }) => {
        console.log(`username -> ${username}`);
        console.log(`name -> ${name}`);
        console.log(`email -> ${email}`);
    };

    testPrint(user);

    return(
        <>
            <h1>비구조할당</h1>
            <p>username - {username}</p>
            <p>name - {name}</p>
            <p>email - {email}</p>
            <button onClick={handlerClick}>클릭</button>
        </>
    );
}

export default PropsTest;