[TIL #26] 20240527

key값이 uniqe해야 하는 이유

불필요한 리렌더링을 막기 위해서!

filteredStudents.map((student) => {
	return (
	  <li key={uuidv4()} onClick={() => onClickHandler(student)} className='student_name'>
	    {student.name}
	  </li>
);
}

key={uuidv4()}는 리렌더링 될 때 마다 key 에 매번 다른 값을 넣어주고 있기 때문에 이곳에 정의하면 안됨!

CamelCase

컴포넌트명이 아닌 이상 대문자로 시작하는건 안됨!

const [texts, setTexts] = useState(() => {
    const Input = localStorage.getItem("texts");
    return Input ? JSON.parse(Input) : [];
});

Input 이 아니라 input이여야 함

styled component는 함수 컴포넌트 안에서 만들지 X

function App() {
  const GlobalStyle = createGlobalStyle`
    ${reset}
    
  `;
  return (
    <div>
      <GlobalStyle />
      <h1>Clickable Boxes</h1>
      <BoxContainer />
    </div>
  );
}

export default App;

export default App 밖에 정의되게 해야한다!