멋쟁이 사자처럼 41회차 ( 04 / 29 )

[학습 목표]

1. React 프로젝트를 구성하여 JSX로 ui를 개발하고 , 함수형 컴포넌트 정의 및 화면 분할을 통해 구조화할 수 있다.     - 함수형 컴포넌트 / 클래스 컴포넌트 extends React.Component{ } / HOOKS 2. Props를 활용하여 컴포넌트 간에 데이터를 효율적으로 전달할 수 있다. 3. useState 훅을 사용하여 컴포넌트의 동적인 상태를 관리하고, 이벤트 핸들러를 통해 사용자 입력을 처리할 수 있다. 4. 입력 필드와 상태를 연결하여 폼 데이터를 실시간으로 반영하고, 폼 제출 이벤트를 처리하여 데이터 전송 로직을 구현할 수 있다.

---

✅ React 기본 개념 

1) React 실행 시키는 법 

npx create-react-app text-ui
npm start -> text-ui 창이 떠짐

 

2) 구조 

위 그림과 같이 test-ui를 생성하면 node_modules , public , src , package-lock.json , package.json , README.md가 생성된다. 이들에 대해 하나씩 살펴보겠다.

 

node_modules : 라이브러리 설치 
public : 클라이언트 html 파일 등
src : 컴포넌트 
        - app.js -> 기본 컴포넌트 (기본 컴포넌트 / 메인 화면 구성 최상위 컴포넌트 )
        - index.js -> React 앱을 실행하는 시작 파일 ( app.js 를 읽어오고 app.js는 실제 렌더링 컴포넌트를 호출해서 화면 출력)
        - myaddress.js -> 기타 사용자 커스텀 컴포넌트 
 package-lock.js & package.json : 프로젝트 설정파일 

 

3) 기본 용어 

- 컴포넌트 (Componenet) : UI를 작은 조각으로 나누는 단위 (함수 , 클래스 , 훅)
- Jsx : js(HTML) -> HTML 비슷한 문법을 JavaScript 안에서 사용하는 것을 말함

 const e = <h1>abc</h1>
 React.createElement("h1",null,"abc");

- Props : (읽기 전용) 컴포넌트끼리 데이터를 주고 받을 때 사용하는 방법 -> 자식으로 정보 전달

function Welcome(props) {
                     return <h1>안녕하세요, {props.name}님!</h1>;
                     }

                  // App.js
                  <Welcome name="민수" />

- State : 컴포넌트 안에서 변경할 수 있는 값 / 변하는 값

< useState>

const [showResult , showResult] = useState(초기값);
      ex) const[count, setCount ] = useState(0); //초깃값
      const handleCalc = () => {
         setCount(count+1);
      }

 

<useEffect>

function MyComponent() {
   useEffect(() => {
       //수행할 작업 (사이드 이팩트)
       //DB 연결결
       return() => {
         // 정리할 코드
         // DB 연결 해제 
       }
   }); [dependencies ])
        
 }

 

---

✅ 예제 살펴보기

🎯useState 사용하여 선택한 날짜 나타내기 

- react04_InputBinding.jsx

import {useState} from "react";

const getToday = () => {
  const today = new Date();
  const year= today.getFullYear();
  const month = today.getMonth();
  const day = today.getDate();
  return `${year}-${month}-${day}`;
}

export default function DateInput() {
const [mydate , setMyDate] = useState(getToday());

  return (
    <div style = {{marginTop : "20px",textAlign : "center"}}>
        <h2> ✅ 날짜 </h2>
        <input type = "date" value = {mydate} onChange={e => setMyDate(e.target.value)}></input>
        <p>선택한 날짜 📆 : {mydate}</p>
    </div>
  );
}

 

- App.js

import DateInput from './React_Basic/react04_InputBinding';

function App() {
	return React04();
}

function React04() {
	return <DateInput/>;
 }
 
 export default App;

 

➡️설명

위 코드는 useState를 사용하여 날짜를 지정한 값을 보여주는 코드이다. 먼저 getToday() 함수는 오늘 날짜를 yyyy-mm-dd 형태의 문자열로 반환하는 함수이다. 

 

DataeInput 컴포넌트는 상태(mydate)에 오늘 날짜를 초기값으로 설정해놓았다. 그리고 input type= "date"로 하여 사용자로부터 원하는 날짜를 지정할 수 있도록 하였다. 사용자가 선택을 하게 되면 setMyDate() 로 상태가 업데이트 되어 <p>에 반영된다. 

 

App.js는 DateInput 컴포넌트를 React04() 함수에서 리턴하고 그걸 App()에서 호출하도록 하였다. 이 코드는 원래 불필요하다. 이러한 코드가 있다고 보여주고 싶어서 위와 같이 쓴 것이다. 아래는 간략하게 적은 코드이다. 

import DateInput from './React_Basic/react04_InputBinding'; 

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

export default App;

 

 

 

🎯useState 사용하여 카운트 증가 감소 및 버튼 색상 랜덤으로 바꾸기

- ex_01.js

import {useState} from 'react';

export default function Counter02 () {
    const[count, setCount] = useState(0);
    const [color , setColor] = useState('lightgray');

    //색상을 랜덤으로 지정할 수 있는 목록
    const colors = ['lightgray','lightred','lightpink','lightgreen','lightyellow','purple','black'
    ];

    //버튼 클릭할 때 색상도 변경
    const handleIn = () => {
        setCount(count+1);
        changeColor();
    };

    const handleDe = () => {
        setCount(count-1);
        changeColor();
    };
    const handleInit = () => {
        setCount(0);
        changeColor();
    };
    const changeColor = () => {
        const myColor = Math.floor(Math.random() * colors.length);
        setColor(colors[myColor]);

    };

    return (
        <div>
            <h2>React practice</h2>
            <p>현재 값 : {count}</p>
            <p>현재 버튼 색상 : {color}</p>
            <button onClick={handleIn} style = {{backgroundColor : color, margin : "20px"}}>증가</button>
             <button onClick={handleDe} style = {{backgroundColor : color, margin: "20px"}}>감소</button>
             <button onClick={handleInit} style = {{backgroundColor : color, margin : "20px"}}>초기화</button>

        </div>
    );
}

 

- App.js

import Counter02 from './React_Basic/ex_01.js';

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

export default App;

 

➡️설명

위 코드도 useState를 사용하여 카운트 값을 증가 감소 및 초기화 시키고 동시에 버튼을 누르면 버튼 색상도 랜덤하게 바뀌는 코드를 짠 것이다. 우선 하나씩 살펴보겠다. useState로 상태를 만들어줬따. count는 카운터 숫자를 저장하는 상태로 초기값은 0으로 설정하였고 color 은 버튼의 배경색 상태를 의미하며 초기값은 lightgray이다. 

 

colors 변수는 버튼 배경색을 랜덤하게 바꾸기 위한 색상 목록이다. 그리고 증가, 감소 , 초기화 기능을 수행할 수 있는 버튼 클릭 핸들러를 만들어주었다. 색상 변경 함수 또한 Math 클래스의 random메소드를 사용하여 랜덤으로 나타나도록 하였다. 

 

그 밑은 button onClick = { }을 사용하여 버튼을 눌렀을 때 동작을 수행하도록 설정하였다. 

 

 

❓내가 위에서 예시로 들은 코드들은 모두 컴포넌트가 하나 뿐이였다. 만약 또 다른 컴포넌트도 같이 랜더링 하고 싶으면 어떻게 해야 할까? 방법은 간단한다. 

function A () { }
function B () { }

export {A as default , B};

 

위와 같이 export를 {}로 한 번에 묶어 보내는 것인데 default 함수는 as default라고 뒤에 붙여 준다. 그리고 함수에도 별명을 붙여줄 수 있다. B as BB 이런 식으로 붙여줄 수 있다. App.js 에서 import 할 경우에는 별명으로 불러와야 한다. 

 

App.js 

import A , {BB} from './경로';

 

위와 같이 default는 {} 없이 적고 , 일반 컴포넌트는 {} 안에 써야 한다. 

 

 

 

🎯useEffect 사용하여 데이터를 받아오기

- react08_FetchData.jsx

import { useEffect, useState } from "react";
export default function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data.slice(0, 5)));
  }, []);
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

 

➡️설명

useState를 사용하여 users에 사용자 목록을 저장할 상태 변수를 만드로 초기값은 빈 배열로 해놓았다. 

 

useEffect를 사용하여 컴포넌트가 처음 렌더링 될 떄 한 번만 실행하도록 하였으며 fetch()로 경로에 있는 데이터를 가져오게 하였다. 그리고 data.slice(0,5)를 사용하여 전체 10명 중 앞의 5명만 가져오도록 설정했다. 

 

map()을 사용하여 사용자 목록을 <li>로 출력하였으며 key= {user.id}를 사용하여 id 값을 받아오도록 하였다.