return ( 🔥Working {/* isDone의 상태에 따라 todo가 반환된다. */} {list .filter((item) => !item.isDone) .map((item) => { return ( // 필터링된 div 컴포넌트와 연결 ); })} 🌈Done! {list .filter(function (item) { return item.isDone; }) .map(function (item) {..
TodoList 과제 필수 구현 기능제목, 내용을 입력하여 Working에 추가, 삭제 완료 버튼을 누르면 이벤트를 받은 todo가 Done로 내려가고 취소를 누르면 다시 Working로 돌아올 것초기값 설정const [list, setList] = useState([ { id: 1, title: "todoList", content: "과제를 해봅시다", isDone: false, regDate: (() => { const now = new Date(); const today = now.getFullYear() + "년" + (now.getMonth() + 1) + ..
컴포넌트에 클릭 이벤트 적용방법컴포넌트에 버튼을 만든다onclick={(e) =>{ alert('이벤트'); }} 인라인으로 직접 이벤트를 작성해줘도 되지만, 함수를 작성하여 컴포넌트에 함수를 연결해주었다주의 * onclick 안에 함수를 연결해줄때 함수명(); 이런식으로 소괄호를 할 경우, 연결이 아닌 해당 함수의 호출이되어버린다 부모 자식 컴포넌트 연결하기값을 보낼 부모 컴포넌트의 return에 자식 컴포넌트를 입력하면 부모, 자식 컴포넌트가 서로 연결되어 "나는 아들입니다" 메세지가 화면에 나온다 컴포넌트에 props 전달하기props란 컴포넌트끼리의 정보 교환 방식이다부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터, 컴포넌트 간의 정보 교류방법이다props는 반드시 위에서 아래 방향으로 흘..
npm | Yarn JavaScript 언어를 위한 패키지 매니저로, 프로젝트에서 필요한 패키지들을 관리하고 설치하는 데 사용된다. 이전에는 둘이 속도 부분에서도 차이가 있었다고 하지만, 이제는 거의 차이가 없다고 한다 npm은 의존관계를 (한 요소가 다른 요소에게서 필요한 것을 얻거나, 다른 요소에 영향을 받아 기능을 수행하는 상태) 가지는 다른 패키지들도 자동으로 설치됨으로 보안 문제가 발생할 수 있다 Yarn은 yarn.lock이나 package.json 파일에 있는 것들만 설치를 하기 때문에 보안이 더 안전하다.Yarn이 npm보다 용량이 더 큰 편이다. 리액트 첫 프로젝트 꼭 Node.js는 LTS 버전으로 설치할 것 프로젝트 폴더를 미리 만들어 준 후 폴더 내에서 Shift + 마우스 오른..