React

1)React개요

2)설치 및 사용

3) 실습

4) React의 상태 관리 - useState 훅

5)실습2

6) 실습3

 

---

1)React 개요

• React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.
• 컴포넌트 기반으로 UI를 구성할 수 있어 재사용성과 유지보수성이 뛰어납니다

 

 

---

2)설치 및 사용

 

Node.js — Node.js® 다운로드

해당사이트에서 NodeJs를 먼저 다운로드해주자

 

프로젝트 생성 및 실행 (프롬포트창)

mkdir '만들 폴더명'
cd '만든폴더명'
npx create-react-app my-react-app
cd my-react-app
npm start

 

 

해당폴더를 VS코드에서 열어주자

 

 

---

노드 실행 (VS코드의 command터미널에서 실행할것)

npm start

 

 

사용예시 (App.js)

/* eslint-disable no-unused-vars */
/* eslint-disable no-lone-blocks */
import logo from './logo.svg';
import './App.css';

function App() { //함수형컴포넌트
 
  {/* 주석: JSX 
    -<태그>...</태그>
    -className : HTML class속성이라고 보면 됨 / .자바스크립트에서 class가 예약어임
    */}
    const myName = "dongGon";
    const naver = {
      name : "네이버",
      url : "https://www.naver.com/"
    }
  return (
   <div className="APP">
      <h1 style={{ color: "white", backgroundColor: "black" }}>
        HELLO,{myName}</h1>
        <a href={naver.url} target="_blank" rel="noreferrer">{naver.name}</a>
        
    </div>
  );
}

export default App;

보다시피 일반 HTML or javascript와 문법이 다른것을 알수있음

---

3)실습

 

App.js (Hello컴포넌트를 부른 후 Hello라는 문자를 찍는 동작임)

/* eslint-disable no-unused-vars */
/* eslint-disable no-lone-blocks */
import './App.css';
import Hello from './components/Hello';

function App() { //함수형컴포넌트
  return(
    <div>
      <Hello/>
     <div className='box'>Hello</div>
    </div>
  );
}

export default App;

 

component/ Hello.js (함수형 컴포넌트 방식)

/* eslint-disable no-unreachable */
import World from "./World"; //하위의 World Component
import styles from "./Hello.module.css";//Hello.module.css컴포넌트를 가져와
const Hello = function(){
    return(
    <>
     <p className={styles.box}>Hello</p>{/* Hello.module.css */}
     <p className="box">Hello</p>{/* index.css */}
    <World/>
    </>
    );
}
export default Hello; 
//Hello 컴포넌트를 기본 내보내기로 설정합니다.
//다른 파일에서 import Hello from './Hello'로 가져와 사용할 수 있습니다.

 

component/ World.js (함수형 컴포넌트 방식)

export default function World(){
    return(
    <>
     <h2 >WORLD</h2>
    </>    
    );
}

 

component/Hello.module.css

.box{
    width: 100px;
    height: 100px;
    background-color: pink;
}

 

index.css

.box{
  width: 100px;
  height: 100px;
  background-color: red;
}

 

npm start 결과

 

---

 

4) React의 상태 관리 - useState 훅

---

5) 실습2

버튼을 누를때마다 div태그내에 message가 출력

useState 추가:

• useState 훅을 사용하여 message라는 상태를 정의하고, 초기값은 빈 문자열로 설정했습니다.
• setMessage는 상태를 업데이트하는 함수입니다.

/* eslint-disable no-unused-vars */
/* eslint-disable no-lone-blocks */
import logo from './logo.svg';
import './App.css';
import Hello from './components/Hello';
import { useState } from 'react';

function App() { 
  const [message, setMessage] = useState(''); // 상태 추가

  const handleClick = () => {
    setMessage(message + '안녕하세요'); // 상태에 텍스트 추가
  };

  return (
    <div id="msg">
      <div>{message}</div> {/* 상태를 기반으로 텍스트 표시 */}
      <button onClick={handleClick}>안녕하세요 button</button>
    </div>
  );
}

export default App;

 

---

6) 실습3

실습2와비슷함 userState훅을 사용해서 입력값을 매개변수로 받아 출력하자

/* eslint-disable no-unused-vars */
/* eslint-disable no-lone-blocks */
import logo from './logo.svg';
import './App.css';
import Hello from './components/Hello';
import { useState } from 'react'; /* React 함수형 컴포넌트에서 상태(state)를 선언하고 관리하는 방법 */

function App() { 
  const [msg,setMsg] = useState(''); //훅(useState)의 초기값 : '';

  const handleClick = () => {
   let a = document.querySelector("#txt").value;
   setMsg(msg + a+"\n\n"); //setMsg : msg를 설정하기위함
   document.querySelector("#txt").value = ''; //설정완료시 입력값은 초기화
  };

  return (
    <div id="msg">{msg} {/*<-- 여기에 입력값을 쌓는거임 */}
      <input type='text' id="txt" placeholder='입력하세요' onKeyDown={enter}/>
      <button onClick={handleClick} > button</button>
    </div>
  );

  function enter(e){  /*enter키를 누르면 handleClick함수가실행 */
    if( e.keyCode == 13){ 
      handleClick();
    }
  }
}

export default App;