24년 12월 10일

계속 복습

리액트 프로젝트 생성

create-react-app myapp

근데 하다가 뭔가 오류가 나면

node-modules , package-lock.json 파일 지우고

다시 폴더 위치에서 cmd 연 다음에 npm install 실행

다시 설치됨.

리액트 앱 시작

terminal 오픈 후에 npm start

페이지에 나타나는 부분인 App.js 파일에 작성

---

📌 useState 란?

컴포넌트의 상태를 간편하게 생성하고 관리할 수 있게 해주는 hook 이다.

📌 state란?

컴포넌트의 상태를 말한다.

---

리액트 이벤트처리

onMouse 이벤트

import { useState } from "react"
import OnclickTest from "./Onclick"

const OnMouseTest = ()=>{

    const [state,setState] = useState({message:'init'})

    const handleMouseEnter = (e)=>{
        console.log("mouse enter..;;")
        setState({message:'enter'}) //set함수
    }
    const handleMouseLeave = (e)=>{
        console.log("mouse leave..;;")
        setState({message:'leave'})
    }

    return (
        <>

        <div>{state.message}</div>
        <div style={ {width:"150px",height:"150px",border:"1px solid"} }
            onMouseEnter={handleMouseEnter} //여기서 onMouseEnter , Leave 는 이벤트명
            onMouseLeave={handleMouseLeave}
            >

        </div>
    </>
    )
}

export default OnMouseTest

박스안에 커서를 올리거나 밖으로 나오게 했을 때 상태를 변화시키거나 하게함.

클릭 이벤트

import { useState } from "react"

const OnclickTest = ()=>{

    const [count,setCount] = useState(0)

    const handleClick=(e)=>{
        console.log("clicked..",e)  //컴포넌트 내부 로직
        if(count<12){
            setCount(count+1)
        }else{
            count = 0
        }
        setCount(count+1)
    }

   return(      //나타내는 부분은 return 안쪽
    <div>
        <button onClick={handleClick}>버튼{count}</button>  
    </div>

   )
}

export default OnclickTest;

Form 이벤트처리

import { useState } from "react"

const OnFormTest = ()=>{

    const [username,setUsername] = useState('')
    const [password,setPassword] = useState('')

    const handleForm =(e)=>{
        e.preventDefault();  //동작을 막음
        console.log("form제출",e)
        console.log(username,password)
        
    }
    const isValid=()=>{} //유효성검사 

    return (

        <form  onSubmit={handleForm}>
            <input type="text" name="username" onChange={(e)=>{ setUsername(e.target.value)}}/>
            <input type="text" name="password" onChange={(e)=>{ setPassword(e.target.value)}}/>
            <input type="submit" />
        </form>
    )
}

export default OnFormTest

e.preventDefault();

이 코드를 사용하지 않으면 form 제출을 할 때 페이지가 새로고침이 되서 console.log 가 초기화됨

프로젝트에 사용해도 될 것 같은부분

이 부분에서 기초적인 유효성검사를 진행.

로그인을 할 때 문자열이나 문자열 형식을 검사하는 기초적인 검사를 이곳에서 하면 될듯

---

조건부 렌더링

const IFTestComponent = (isLogined)=>{
    if(isLogined){
        return <div>로그인 완료</div>
    }else{
        return <div>로그인 실패 ,, 다시하셈</div>
    }
}

export default IFTestComponent

조건에 따라 다른 태그가 나오게 지정할 수 있다.

function App() {
  return (
    <>
      <IFTestComponent isLogined={true}/>    
      <hr/>
      <Cond2Component isLogined={true}/>
    </>
  );
}

isLogined 라는 파라미터가 true 라고 설정

삼항연산자를 사용하는건 true false 를 다 표시할 때

  <Cond2Component items={{}} />

중괄호 안에 중괄호 쓰는 이유

---

리스트 & 키

리액트에서 리스트는 배열인데 , 이 배열 데이터를 사용해서 여러 컴포넌트를 렌더링할 수 있다.

map() 메서드를 사용하면 배열의 각 요소를 컴포넌트로 변환하여 리스트를 쉽게 생성할 수 있다.

키(key) 란 리스트의 각 항목을 구분하는 고유한 값이다.

리스트를 렌더링할 때 리액트는 key 를 사용해서 항목이 변경,추가,삭제 되었는지 알 수 있다.

key 값으로 인덱스를 사용하는 경우도 있다고 하는데 별로 권장되는 방법은 아니라고 한다.

항목이 추가/삭제될 때 문제가 발생할 수 있기 때문이다.

그래서 key 값으로 사용할 값은 DB에서 제공하는 PK 값 같은 고유한 값을 사용하는게 좋다 .

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li> // 고유 ID 사용
      ))}
    </ul>
  );
}

고유한 ID를 사용해서 key 값으로 지정해주었다.

---

리액트의 라우팅이란?

1. 라우팅이란? - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다.

간단하게 생각하면 사용자가 웹 내에서 다른 페이지나 화면으로 이동하게 하는 기능이다.

리액트의 특성으로는 기본적으로 리액트가 싱글페이지 어플리케이션이라는 점이다.

그렇기 때문에 사용자가 링크를 클릭하더라도 전체페이지를 다시 로드하지 않고 화면 일부만 업데이트해야한다.

URL 에 따라 다른 화면이나 컴포넌트를 보여주기 위해 라우팅 기능을 사용해야 한다.

(a 태그 같은 경우는 페이지 전체가 새로 로딩되기 때문에 라우팅을 사용하는게 사용자 입장에서 보기 편하고 좋음 !)

라우팅에서 가장 많이 사용하는 모듈 3가지

• BrowserRouter
  • 라우팅 기능을 활성화하는 라우터 컨테이너
  • 라우터의 최상위 요소
  • 모든 라우팅 로직은 이 BrowserRouter 내부에서만 작동한다.
• Routes
  • 단일 라우트를 렌더링하는 역할
  • Route 컴포넌트를 감싸는 부모컨테이너이다.
  • URL 에 일치하는 단 하나의 Route 만 렌더링한다.
• Route
  • 경로와 컴포넌트를 연결해주는 역할을 한다.
  • paht 속성을 사용해서 URL: 경로를 지정한다.
  • element 속성을 통해 해당 경로에서 렌더링할 컴포넌트를 지정한다.

라우팅 사용법

import { BrowserRouter } from "react-router-dom";

우선 사용할 페이지 내에서 라우터를 import 한다

import { Route, Routes, BrowserRouter } from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

라우팅에서 페이지를 이동시킬때는 a 태그 보다는 Link to 태그를 이용해서 페이지를 이동시킨다.

그럼 페이지 이동없이 화면만 업데이트 시킨다.

a태그로 하면 새로고침이 되어서 상태값이 모두 초기화가 되어서

router dom 에 있는 link to 를 사용하면 새로고침 없이 페이지 이동이 된다.

---