TIL 12.23

카테고리를 선택할 때 state 변경이 일어나도록 하는 함수를 연결했다.
그런데 무한 렌더링에 빠졌다는 에러메세지가 떠서 잘못된 부분을 찾아야 했다.

잘못된 시도)

const handleClick = (menu) => setCurrProductMenu(menu)

return (
    <div>
      <StyledCategroyBox>
        <div onClick={handleClick('bread')}>Bread</div>

onClick함수에 함수값 자체를 넣어버린 것이 되고,
그러면 클릭을 했을 때만 state변경이 일어나는 것이 아니라
홈페이지 렌더링 했을 때부터 state변경이 되면서 다시 처음 부터 이 함수를 실행하게 된다. 말그대로 무한 렌더링!

해결)

// product_posts 저장값 중 하나인 productmenu값을 카테고리와 연결하여 state변경을 일으키는 함수
  // currying! onClick함수의 인자를 비워둬야 제대로 함수식을 쓴 것!
  const handleClick = (menu) => () => {
    setCurrProductMenu(menu);
  };

onClick함수는 기본 형태가 ()=>{...}이어서 인수부분을 비워줘야 작동하므로
함수를 정의 할 때 빈 인수형태의 함수가 실행되도록 필요한 인수는 따로 받아줘야 한다.
currying 형태에 대해서 다시 공부하기!

return (
    <div>
      <StyledCategroyBox>
        <div onClick={handleClick('bread')}>Bread</div>

제대로된 함수를 넣어주었더니 잘 작동한다.