전체 글

Writing Markup with JSX

JSX는 JavaScript 파일 내에서 HTML과 유사한 마크업을 작성할 수 있는 JavaScript 확장 구문이다. JSX: JavaScript에 마크업 넣기 웹은 HTML, CSS, JavaScript를 기반으로 구축된다. 그래서 우리는 배울 때 각자의 역할을 HTML은 콘텐츠, CSS는 디자인, 로직은 JavaScript로 분리해서 작성하였다. 하지만 웹이 점점 반응형, 상호작용을 중요시 하게 됨으로써 JavaScript가 HTML을 담당해가기 시작했다. 이것이 React에서 렌더링 요소와 마크업이 같은 위치, 즉 컴포넌트에 함께 존재하는 이유이다. 위의 왼쪽 예시처럼 동적으로 조건 판단을 요하는 요소가 있다면 JSX를 이용해 동적으로 렌더링이 가능하다. 또한 오른쪽 예시처럼 이벤트 리스너를 JS..

Importing and Exporting Components

React에서 UI를 컴포넌트로 나누어서 사용했을 때의 가장 큰 장점은 재사용성이다. 그리고 한 컴포넌트는 다른 컴포넌트와의 중첩을 통해 만들 수 있다. 따라서 헷갈리지 않고, 깔끔하게 유지하기 위해 컴포넌트를 분할하고, 그 과정에서 각각의 컴포넌트는 다른 파일로 관리할 수 있다. 이렇게 다른 파일로 관리하게 될 때 한 컴포넌트에서 다른 컴포넌트를 사용하기 위해 그 컴포넌트를 가져와야 하고, 또 그 파일에선 해당 컴포넌트를 내보내야 다른 파일에서 가져올 수 있게 된다. 컴포넌트 내보내기 및 가져오기 컴포넌트를 넣을 새 JS 파일을 만든다. 해당 파일에서 컴포넌트 함수를 내보낸다. 컴포넌트를 사용할 파일로 해당 컴포넌트를 가져온다. 동일한 파일에서 여러 컴포넌트 내보내기 및 가져오기 지금까지는 export..

Your First Component

컴포넌트 정의 1단계: 컴포넌트 내보내기 표준 JavaScript 구문에서 export default 키워드로 현재 파일에 존재하는 컴포넌트를 내보낼 수 있다. 내보내게 되면 다른 파일에서 이 컴포넌트를 import 해와서 사용할 수 있다. 2단계: 함수 정의 컴포넌트도 결국 React에서 화면에 렌더링하기 위한 함수이다. 따라서 함수를 정의해주면 된다. 이 때 주의할 점은 React 컴포넌트 또한 일반 JavaScript 함수라고 말했지만, 이름은 무조건 대문자로 시작해야 한다. 그렇지 않으면 일반 HTML 태그로 인식하기 때문에 작동하지 않는다. 3단계: 마크업 추가 만약 img 태그를 반환한다고 하면 다음과 같이 작성할 수 있다. HTML 처럼 보이지만 JavaScript이다. (JSX) retur..

Describing the UI

UI 설명 React는 UI 렌더링을 위한 JavaScript 라이브러리이다. React를 사용하면 재사용 가능하고 중첩 가능한 구성 요소로 결합할 수 있다. JSX로 마크업 작성하기 일단 JSX에 대해 알아볼 필요가 있다. JSX는 HTML과 비슷하게 생겼지만, JavaScript를 확장한 문법이다. const name = 'Minjun Kim'; const element = Hello, {name} 위와 같이 HTML 태그로 이루어진 element 자체를 변수로 선언하여 할당할 수 있다. JSX의 중괄호 안에는 모든 JavaScript 표현식이 들어갈 수 있다. 따라서, 예를 들어 어떤 태그에 속성을 동적으로 추가하고 싶을 경우 JSX를 활용할 수 있다. 또 JSX를 활용함으로써 많은 속성을 넣게 되..

LeetCode / Graph / 417번 / Pacific Atlantic Water Flow / JS

Pacific Atlantic Water Flow - LeetCode Can you solve this real interview question? Pacific Atlantic Water Flow - There is an m x n rectangular island that borders both the Pacific Ocean and Atlantic Ocean. The Pacific Ocean touches the island's left and top edges, and the Atlantic Ocean touches leetcode.com 각 칸에 있는 숫자는 그 땅의 높이라고 생각하면 된다. 따라서 그 칸에 있는 물은 현재 있는 칸의 높이보다 작거나 같..

LeetCode / Graph / 994번 / Rotting Oranges / JS

Rotting Oranges - LeetCode Can you solve this real interview question? Rotting Oranges - You are given an m x n grid where each cell can have one of three values: * 0 representing an empty cell, * 1 representing a fresh orange, or * 2 representing a rotten orange. Every minute, any leetcode.com m * n의 격자판이 주어지는데 다음과 같은 각 셀은 3가지 상태중 하나를 가진다 0: 빈 셀 1: 신선한 오렌지가 있는 셀 2: 썩은 오렌..