이번 포스팅에서는 목록 렌더링과 컴포넌트의 순수성에 대해 다루어 보겠습니다. 이번 포스팅도 단순히 컴포넌트의 순수성에 대한 내용을 다루지는 않습니다. 컴포넌트 포스팅에서 다루었던 내용을 바탕으로 컴포넌트 순수성에 대해서 다루어 보겠습니다. 컴포넌트의 단일 책임! 컴포넌트 안에서 변수, 배열들의 변화 x 불변성 유지! 이후에 배울 이벤트 핸들러, 상태 관리에 대한 개념 언급! let todolists = [{ id: 1, //JSX에서 key로 사용됨. name: "예외 처리하기", done: true }, { id: 2, name: "계층 구조 설계하기", done: true }, { id: 3, name: "UI 구현하기", done: true }, { id:4, name: "사용자와 상호 작용을 변수..

https://uiverse.io/ Explore 3000+ Free UI Elements: CSS & Tailwind Library of free and customizable UI elements made with CSS or Tailwind. It's all open-source, and it's all free. Try it out to save you many hours spent on building & customizing UI components for your next project. uiverse.io

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/reviews?hl=ko

https://chromewebstore.google.com/detail/chrome-%EC%9D%98-%EC%BB%AC%EB%9F%AC-%ED%94%BC%EC%BB%A4/clldacgmdnnanihiibdgemajcfkmfhia?hl=ko

https://chromewebstore.google.com/detail/%EB%B0%B1%EC%A4%80%ED%97%88%EB%B8%8Cbaekjoonhub/ccammcjdkpgjmcpijpahlehmapgmphmk/reviews?hl=ko

https://overapi.com/ OverAPI.com | Collecting all the cheat sheets OverAPI.com Collecting All Cheat Sheets overapi.com

이번 포스팅의 제목은 컴포넌트에 props를 전달하기 입니다. 하지만 이번 글은 제목처럼 단순히 props를 전달하는 것이 아닙니다. 컴포넌트에 props를 전달하는 과정은 복잡하기 때문입니다. 이제부터는 그동안 다루었던 컴포넌트의 정의, JSX의 규칙, 컴포넌트 렌더링 과정을 모두 알고 있어야 합니다. 이를 이용하여 컴포넌트에 props를 전달하는 과정을 알아보도록 하겠습니다. 또한 글의 길이와 가독성을 위해 전체 코드는 접은글로 작성할 것입니다. 필요하면 펼쳐보면 됩니다. 앞의 예제에서는 App.js에서 TodoTempmet 컴포넌트, TodoHead 컴포넌트, TodoMain 컴포넌트를 모두 관리했습니다. 이렇게 하나의 ..따라서 먼저 파일부터 나누어 보겠습니다. 1. props란? 먼저 props..