복습 정리 노트

이번 포스트에서는 create-react-app을 이용하여 리액트에서 프로젝트를 생성하고, 필요한 파일만 남기는 방법에 대해 다루어보겠습니다. create-react-app create-react-app은 리액트에서 제공하는 React 어플리케이션을 생성하기 위한 툴입니다. npx 명령어를 통해 create-react-app을 실행할 수 있는데, 이를 위해서는 NodeJS가 설치되어 있어야 합니다. 따라서 NodeJS가 설치되어 있지 않다면 공식 사이트로 가서 안정적인 버전의 NodeJS를 설치해주면 됩니다. NodeJS를 설치하였다면 이제 터미널 등에서 프로젝트를 생성할 폴더로 이동하고, 다음의 명령어를 실행하면 됩니다. npx create-react-app (프로젝트 이름) 그럼 (프로젝트 이름)이라..

이번 포스트에서는 React(리액트)의 props라는 기능에 대해 알아보고, 예시를 통해 props가 어떻게 활용되는지 설명해보도록 하겠습니다. Props(속성) React(리액트)에서 props는 properties, 즉 속성이라는 뜻으로 컴포넌트에 전달할 수 있는 데이터라는 뜻을 가지고 있습니다. 우리는 변수와 같이 컴포넌트에 유동적으로 변형을 주어야 할 때, props를 통해 값을 전달하여 컴포넌트가 원하는 값을 나타낼 수 있도록 설정해 줄 수 있습니다. 이렇듯 props를 활용하면 동일한 코드를 가지고도 여러 컴포넌트들의 서로 다른 부분들만을 필요에 따라 다른 props 값을 전달하여 구현할 수 있으므로, 코드의 재사용성이 높아진다는 장점이 있습니다. 예를 들어 5개의 디자인이 비슷한 서로 다른 ..

이번 시간에는 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을 로드하는 코드입니다. 필..