복습 정리 노트

이번 시간에는 React(리액트) 코드를 여러 개의 JSX 요소들로 나누어 코드의 가독성을 높이는 방식으로 코드를 최적화해 보도록 하겠습니다. 실행 결과와 전체 코드 먼저 실행 결과입니다. select 태그를 사용하여 모드를 선택할 수 있고, 원하는 단위를 다른 단위로 변환할 수 있습니다. ↓ 전체 코드는 다음과 같습니다. 더보기 더보기 코드 부분별로 살펴보기 그럼 이제 코드를 여러 개의 작은 JSX 요소로 나누는 것이 어떤 장점이 있는지 살펴봅시다. 단위 변환기 단위를 선택해주세요. 시간 ↔ 분 킬로미터 ↔ 마일 {index === "x" ? "단위를 선택해주세요." : null} {index === "0" ? : null} {index === "1" ? : null} 주목할 코드는 이 부분입니다. s..

이번 시간에는 React(리액트)의 State를 이용해 단위 변환기를 구현해보도록 하겠습니다. 리액트에서 State는 이름 그대로 '컴포넌트의 상태', 또는 '컴포넌트 안에서 관리되는 데이터'를 의미합니다. State를 이용해 어떤 컴포넌트의 상태를 변경하면, React는 자동으로 이 컴포넌트만을 다시 렌더링하여 변경된 상태를 페이지에 반영해줍니다. React의 State를 사용하는 것이 좋은 이유는, 리액트는 앞서 말한대로 필요한 부분만 다시 렌더링하므로, 값이 바뀐다고 페이지 전체를 다시 렌더링할 필요가 없기 때문입니다. 따라서 매우 효율적으로, 화면에 변화가 필요한 부분만을 다시 로딩할 수 있습니다. 물론 Vanilla Javascript에서도 수동적으로 DOM을 조작할 수 있지만, 매우 긴 코드가..

React(리액트)를 이용해 간단한 컴포넌트와 이벤트를 간단하게 구현해봅시다. 컴포넌트와 이벤트 구현 h3 텍스트에 마우스가 진입하면 '마우스가 들어왔습니다.'라는 텍스트가 콘솔에 출력되고, 버튼을 클릭하면 '클릭되었습니다.'라는 문구가 콘솔에 출력됩니다. 코드가 어떻게 작동하는지 한 줄씩 확인해봅시다. 이 코드는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 중 하나인 React를 로드하는 코드입니다. 이 코드는 React에서 작성한 객체 모델인 DOM을 실제 페이지에 표시하는 역할을 수행하는, ReactDOM을 로드하는 코드입니다. 이 코드는 최신 버전의 JavaScript 코드를 옛날 버전의 JavaScript 코드로 변환해주는 역할을 수행하는, Babel을 로드하는 코드입니다. 필..