React 정리 (useState, className, propTypes, CSSModule, useEffect, Route, map)

프로젝트 진행하면서 프론트 엔드를 안 할 수는 없어서 간단한 무료 강의 보고 중요했던 부분 간단 정리 시작~ (정보 공유보다는 복습 용도로 작성하는 글이다.)

 

 useState()

 컴포넌트에서 동적인 state를 관리할 수 있다. import {useState} from "react";로 불러와서 사용한다.

 값을 변경한 후 rerender까지 처리해준다. useState는 해당 값과, modifier를 반환해 준다.

 ex) const [counter, setCounter] = usetState(0);  [counter, setCounter] 각각 순서대로 변수, modifer이다. useState(0)의 0은 counter의 초깃값으로 세팅된다. modifer까지 사용하는 예제를 작성해 보겠다.

 ex) count onClick = () =>{ setCounter((current) => current+1)};  값을 수정할 때 직접 counter + 1 하는 것보다 modifier에 매개 변수를 작성 (위의 current)하여 값을 변경하는 것이 더 좋은 소스이다. 

 state가 리스트인 경우 원래 내용을 포함하여 추가하려면  ex) setToDos(preToDos => [toDo, ...prevToDos])와 같이 작성해 준다. (... 을 사용하는 것)

 

  className

 html 태그에서 안에 클래스를 부여할 때 class를 사용하였지만 jsx에서는 className을 사용한다.

 

 input control

 input에 입력을 받을 때 value = {data}로 사용하고 data를 useState로 생성한다. 입력이 발생하면 onChange={handleData}로 감지하여 const handleData = (event) => setData(event.target.Data)로 값 변경해 준다.

 

props, prop-types

 component끼리 데이터를 주고받는 방법이다. App.js에서 <Login id={userId} pw={userPw} /> 을 작성했다 예를 들겠다. Login component에 id와 pw가 넘어갔다. function Login (props){ ...} 같이 작성 후 props.id, props.pw로 사용할 수 있다. 더 간단히 function Login ({id, pw}){...} 작성 후 바로 id, pw로 사용할 수 있다. 

 proptypes은 props들의 타입을 명시해서 오류를 막을 수 있다. 위의 예시를 이어서 Login.js에 import PropTypes from "prop-types"; 작성 후 Login.propTyes ={ id : PropTypes.string.isRequired,  pw : PropTypes.string.isRequired,}; 를 작성해 주면 잘못된 타입을 넘겨받았을 때 오류를 감지할 수 있다. (배열은 PropTypes.arrayOf(PropTypes.string).isRequired) 해주면 된다.)

 

 CSS Moudle

 react는 component라는 기술을 사용하기에 한 페이지 안에서 여러 component들이 존재하여 css가 (id, className 중복으로 인하여) 겹치는 경우가 발생할 수 있다. 이를 해결하기 위해 css Module을 사용한다. Login.js에 적용할 css Module파일을 만들어 보겠다. Login.module.css로 파일을 만든다. (Login이라고 적어야만 하는 것 아님.) 그 다음 Login.js에 import styles from "./Box.module.css"; 을 작성해준다. 준비가 끝난 것이다. 이제 id와 className을 부여할 때 import와 from 사이에있는 객체를 사용한다. (styles라고 적어야만하는 것 아님) 

 ex) <div className={styles.Box}> test </div>        >>>>>>>>>>>Login.module.css 파일에 css와 같이. Box로 속성들을 정하면 된다.

 

 useEffect

 useState에서 사용한 값이 변경될 경우 모든 코드들이 다시 실행된다. 그대로 유지해도 되는 코드들도 화면을 다시 그린다는 뜻이다. 이럴 경우 대표적 단점들 중 하나로 만약 엄청난 양의 데이터를 갖고 있는 api가 다시 호출되면 시간과 자원이 낭비되는 케이스가 있다. 이를 해결하기 위해 useEffect를 사용한다. 기본 형태는 useEffect(함수, [])이다. 함수는 목적 함수이다. 두 번째 인자는 어떤 것의 값이 바뀐 경우 함수를 실행할지 정한다. 다시 말해 [] 안에 있는 인자가 바뀔 때마다  함수를 재실행시킨다. []가 비어있으면 코드가 처음 실행될 때만 함수가 실행된다. 앞서 말한 문제를 해결하려면 함수 부분에 api를 불러오는 부분을 작성하고 []를 비어두면 api는 코드가 처음 실행될 때만 호출된다. (함수에 return값은 컴포넌트가 destory 될 때 실행되는데 이 부분은 잘 사용하지 않는 것 같다. 알아만 두자.)

 

 Map

 js 문법 중 하나이다. 리스트에 멤버 모두에게 적용되는 함수를 작성할 수 있다. list = ['a', 'b', 'c', 'd']라고 가정하겠다. 

 {list.map((l)=>{ <li>l.toUpperCase()<li/>})}    설명하면 매개변수인 l은 list의 원소들을 차례로 처리해 준다. 이 코드가 동작하면 A, B, C, D 가 <li> 형태로 나타나게 된다. 리스트에 map을 이용할 때 key값도 설정해 주는 것 잊지 말자. 까먹으면 경고창 나오니 참고하자.

 

Route

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/movie/:id" element={<Detail />} />
      </Routes>
    </Router>
  );
}

 App.js에 작성하면 좋은 문법이다. path에 적혀있는 url로 접속을 하면 element에 해당되는 컴포넌트를 보여준다. Spring 컨트롤러에서 view 페이지를 매핑해 주는 것과 같은 역할인 것 같다. 두 번째 Route에 :id 부분은 정해진 것이 아니라 매개변수를 받는 것이다. 이때 Detail.js에 const { id } = useParams(); 를 작성해서 id를 변수로 사용할 수 있다. /movie/1로 url을 입력하면 Detail.js에서 id =1이 되는 것이다.

 

(이후 공부하다 알게 되는 것이 있으면 추가 정리할 것이다.)