함수 전달 렌더 에러 문제 & 리액트 className 작성법 정리

 

1. 버튼 클릭 시 useState를 활용해 type의 변수 값을 변경해주고 싶을 때

코드의 중복되는 부분을 함수로 작성해 전달해 주려했는데 무한 반복이 돌아간다.

const [type, setType] = useState('');
const handleSortChange = (type) => {
    setType(type);
};

이는 버튼을 클릭했을 때 함수를 전달하면 발생하는 에러로

<button onClick={ handleSortChange("date") }>button</button>

위 함수가 실행될 때 state를 변화하는 코드이기 때문에 계속 렌더되는 에러가 발생한다.

 

 

state 변화시킬 땐 아래 방법으로 작성

• ( ) => arrow function으로 함수를 전달해주거나
• ( ) => 바로 setType() 코드를 작성해 변수를 업데이트 하거나
• 돔 요소에 id 값을 지정해주고 이벤트 핸들러를 전달해 e.target.getAttribute("id") 혹은 e.target.id으로 변수값 업데이트

<button onClick={()=>handleSortChange("date")}>button</button>

<button onClick={()=>setType("date")}>button</button>

<button onClick={(e)=>handleSortChange(e)}>button</button>

 

• 전체 코드 확인

import { useState } from "react";

export default function App() {
  const [type, setType] = useState(null);
  const handleType = (type) => {
    setType(type);
  };
  const handleTypeWithId = (e) => {
    setType(e.target.getAttribute("id")); // e.target.id
  };

  return (
    <div className="App">
      <button onClick={() => handleType("btn1")}>btn 1</button> // 1번. 직접 type 변수값 전달
      <button onClick={() => setType("btn2")}>btn2</button> // 2번. 함수 전달없이 바로 setType 코드 작성
      <button onClick={(e) => handleClick(e)}>btn2</button> // 3번 이벤트 핸들러를 이용해 id값 받아와 type 변수값 변경
    </div>
  );
}

 

 

2. className을 적용하는 다양한 방법

module.css를 자주 쓰다 보니 기본 클래스명 적용하는 법이 곧장 기억나지 않았다.

이번 정리를 통해 확실히 기억할 수 있었다.

 

- 기본 html에서는 DOM 요소들에 class에 css 클래스명을 작성해준다.

<p class="one"> html class </p>

 

리액트에서는 JSX 문법으로 className을 사용해 스타일을 적용해준다.

1 ) module.css

- 기본 클래스명 작성

<p className={styles.one}> module css 1 </p>

 

- css 2개 지정 시

<p className={`${styles.one} ${styles.two}`}> module css 2 </p>

<p className={[ style.one, style.two ]}.join(' ')}> module css 2 </p>

 

- className에 '-'가 포함된 경우 작성법

<p className={styles['one-type']}> module css 3 </p>

 

2) 기본 react css

<p className="one"> react css </p>

<p className="one-type two"> react css </p>

- 삼항 연산자를 활용해 상황별 css 지정

<p className={num == 0 ? "one" : "one two"}> react css 2 </p>

 

 

3. table 데이터를 정렬하는 방법 ( 일자별 정렬 )

const TABLE_DATA = [
    {
      title: "오늘은 수업이 없습니다.",
      viewCount: 12,
      date: "2021-11-11"
    },
    {
      title: "내일은 블로그 포스팅을 정리합시다.",
      viewCount: 22,
      date: "2021-10-10"
    },
    {
      title: "문서화를 잊지 맙시다.",
      viewCount: 2,
      date: "2020-10-10"
    }
  ];

 

위와 같은 전달된 데이터 중 'viewCount' 같은 숫자 변수는 sort 함수를 통해 정렬할 수 있지만,

문자열로 전달된 날짜 데이터를 정렬하기 위해서 new Date( ).getTime( )를 활용해 전달된 일자를 숫자로 변환함으로써 순서를 정렬할 수 있다.

 

날짜 변환된 값 확인

let data = tableData.sort((a,b) => {
    if(sortedType === 'viewCount') return b[sortedType] - a[sortedType];
    else return new Date(b[sortedType]).getTime() - new Date(a[sortedType]).getTime();
  })

사용자 클릭을 통해 정렬 타입이 바뀌면 data 변수가 재정렬된다.

sortedType에 날짜가 전달될 경우

각 객체의 일자값을 숫자로 변환해 정렬된 값을 반환해준다. ( ex. getTime()을 통해 )

function Table({ tableData }) {
  const [sortedType, setSortedType] = useState('date');
  let data = [...tableData].sort((a, b) => { // type에 따른 데이터 정렬
    if (sortedType == "viewCount") return a[sortedType] - b[sortedType];
    if (sortedType == "date"){
       return new Date(b[sortedType]).getTime() - new Date(a[sortedType]).getTime();
    }
  });
  
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th onClick={()=>setSortedType("viewCount")}>ViewCount</th> // 클릭시 정렬 타입 업데이트
            <th onClick={()=>setSortedType("date")}>Date</th>
          </tr>
        </thead>
        <tbody>
          {data.map((data, index) => {
            return (
              <tr key={index}>
                <td>{data.title}</td>
                <td>{data.ViewCount}</td>
                <td>{data.date}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default Articles;

Posted by Ang