리액트(React) - 리액트 기초

리액트 과정 ) 설치 -> 수정 -> 배포    설치와 수정은 생략하겠습니다.

 

배포

npm start 명령으로 실행한 애플리케이션은 개발을 위한 애플리케이션입니다. 개발하기에는 좋지만, 서비스하기에는 용량도 크고 여러 가지 불필요한 메시지도 표시하기 때문에 실제로 서비스에 사용할만한 결과물은 아니라고 할 수 있습니다. 그렇다면 어떻게 하면 최적화된 효율적인 배포본을 만들 수 있는지 살펴보자.

 

npm run build 명령어를 입력하면 빌드 명령이 시작됩니다. 참고로 배포한을 마드는 과정을 빌드(build)라고 합니다. 빌드를 마치면 프로젝트에 build라는 폴더가 생기고, build 폴더에는 index.html을 의존하는 다른 파일들이 존재하게 됩니다. build에 index.html을 보면 공백조차 없는 모습을 볼 수 있습니다. 배포할 때는 공백 같은 요소가 필요 없기 때문에 파일의 용량을 줄이기 위해서 입니다.

 

npm run build



이 serve는 웹 서버인데, 웹 서버가 가진 옵션 중에  -s 옵션을 추가하면 사용자가 어떤 경로로 들어오든 간에 index.html 파일을 서비스해주게 됩니다. 그리고 build 폴더를 지정하면 해당 폴더에 있는 index.html 파일을 서비스하라는 뜻입니다.

npx serve -s build

명령어를 입력하면 접속할 수 있는 주소들이 나오는데, 여기서 첫 번쨰 주소인 http:localhost:3000으로 접속해보겠습니다. 이 화면은 개발 환경을 위한 버전이 아닌 실제로 서비스에서 사용할 수 있는 버전이 만들어지고, 서비스된 모습을 볼 수 있습니다.

 

 

컴포넌트

- '리액트는 사용자 정의 태그를 만드는 기술이다.'

- 리액트에서 사용자 정의 태그를 만들 떄는 반드시 대문자로 시작해야 합니다.

 

import './App.css';


function Header(){  // 사용자정의 태그
  return(
    <div>
      안녕하세요
      <h1>리액트</h1>
    </div>
  )
}

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

export default App;

return()을 써야 한다는거를 기억하자! 또한 eslit에러가 발생한다면 <></>, <div></div> 태그를 감싸줘야 한다.

 

리액트에서는 사용자 정의 태그라는 표현을 쓰지 않고 컴포넌트(Component)라는 표현을 씁니다.

컴포넌트를 만드는 기술인 리액트 덕분에 여러 태그들을 하나의 독립된 부품으로 만들 수 있게 됐고, 이런 부품을 이용하면 더 적은 복잡도로 소프트웨어를 만들 수 있습니다. 동시에 내가 만든 컴포넌트를 다른 사람에게 공유할 수도 있고, 다른 사람이 만든 컴포넌트를 내가 만들고 있는 프로젝트에서 사용할 수동 있습니다. 컴포넌트를 재상용함으로써 생산성을 획기적으로 끌어 올리는 굉장히 중요한 역할을 하고 있습니다.

 

 

props

import './App.css';


function Header(props){  // 사용자정의 태그
  console.log(props);
  return(
    <div>
      안녕하세요
      <h1>리액트</h1>
      <h1>props.title</h1>
      <h1>{props.title}</h1>
      <h1>{props.body}</h1>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Header title="props에 속성을 추가" body="나는 몸통이이야"/>
      <br/><br/>
      <Header />
    </div>
  );
}

export default App;

PROP은  리액트에 속성이다. 함수의 코드르르 직접 변경하지 않고 태그에서 title 속성의 값을 설명하면 설정한 값이 함수에 반영돼서 웹 페이지의 내용이 바뀌게 된다. 콘솔을 확인해보면 props 매개변수로 객체가 들어온다.

 

*return 문 안에서 해당하는 값을 출력하려면 { }과 같이 중괄호로 깜싸줘야합니다. { }로 감싸주면 중괄호와 중괄호 사이에 있는 정보는 일반적인 문자열이 아니라 표현식으로 취급된다.

 

이벤트

onClick 이벤트

import './App.css';


function Header(props){ 
  return(
    <div>
      안녕하세요
      <h1 onClick={function(){
        alert("나는 리액트다")
      }}>리액트 Click</h1>
      <h1>props.title</h1>
      <h1>{props.title}</h1>
      <h1>{props.body}</h1>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Header title="props에 속성을 추가" body="나는 몸통이이야"/>
    </div>
  );
}

export default App;

<h1>테그에 onClick 이벤트를 추가했습니다. 이 <h1> 태그는 순수한 HTML과 똑같지 않고, 유사 HTML입니다. 함수 안에 코드를 작성하면 리액트 개발 환경이 최종적으로 브라우저가 이해할 수 있는 HTML로 변환해주는 것이기 때문에 여기에서 사용하는 문법은 순수한 HTML과 똑같지 않습니다.

 

onClick 이벤트가 콜백 함수로 들어간 함수가 호출될 때 리액트는 event 객체를 첫 번째 파라미터로 주입합니다. 이 이벤트 객체는 이벤트 상황을 제어할 수 있는 여러 가지 정보와 기능이 들어가 있습니다.

 

onChange 이벤트

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

function App() {

  function HandlerOnChage(event){
    setText(event.target.value);
    console.log(event.target.value);
}

  const [text, setText] = useState('ddd')

  return (
    <div className="App">
      <input onChange={HandlerOnChage} value={text}></input>
    </div>
  );
}

export default App;

'onChange'는 HTML 요소에서 발생하는 이벤트 중 하나로, 주로 입력 요소(예, <input>, <textarea>, <select>)에서 사용됩니다. 이 이벤트는 해당 입력 요소의 값이 변경될 때 발생하며, 사용자가 텍스트를 입력하거나 선택 옵션을 변경하는 등의 동작이 이루어질 때 사용됩니다.

 

State

리액트 컴포넌트는 입력과 출력이 있는데, 입력은 prop입니다. prop을 통해서 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리해서 return 값을 만들면 바로 그 return 값이 새로운 UI가 됩니다.

 

prop과 함께 컴포넌트를 함수를 다시 실행해서 새로운 리턴 값을 만들어주는 또 하난의 데이터가 있는데, 바로 state입니다. prop과 state 모두 값이 변경되면 새로운 리턴 값을 만들어서 UI를 바꿉니다. 그런데 prop과 state의 차이점은 prop은 컴포넌트를 사용하는 외부자를 위한 데이터이고, state는 컴포넌트를 만드는 내부자를 위한 데이터라는 차이가 있습니다.

 

import React, { useState } from 'react';

const Article = (props) => {
    return (
        <>
            <div>{props.title}</div>
            <div>{props.body}</div>
        </>
    );
}

const Header = () => {
    const [mode, setMode] = useState("WELCOME");

    const topics = [
        {id:1, title:'html', body: 'html is...'},
        {id:2, title:'css', body: 'css is...'},
        {id:3, title:'javascript', body: 'javascript is...'},
    ];

    let content = null;

    if (mode === "WELCOME") {
        content = <Article title="Welcome" body="Hello, Web" />;
    } else if (mode === "READ") {
        content = <Article title="Welcome" body="Hello, Read" />;
    }

    return (
        <div>
            {content}
            <div onClick={() => setMode(prevMode => prevMode === "WELCOME" ? "READ" : "WELCOME")}>
                Change Mode
            </div>
        </div>
    );
}

export default Header;

삼항 연산자를 이용하여 버튼 하나로도 on/off와 비슷한 방식으로 구현이 가능하다.

 

useState는 배열을 리턴하는데, 0번째 원소는 상태의 값을 읽을 때 쓰는 데이터이고, 1번째 데이터는 상태의 값을 변경할 때 사용하는 함수입니다.