전체 글

LeetCode / Graph / 210번 / Course Schedule II / JS

Course Schedule II - LeetCode Can you solve this real interview question? Course Schedule II - There are a total of numCourses courses you have to take, labeled from 0 to numCourses - 1. You are given an array prerequisites where prerequisites[i] = [ai, bi] indicates that you must take leetcode.com 총 들어야할 강의의 수인 numCourses와 선행 강의의 쌍인 prerequisites가 주어진다. 예를 들어 numCourses ..

Passing Props to a Component

React 컴포넌트들은 props를 사용하여 서로 통신한다. 부모 컴포넌트가 props로 자식 컴포넌트에게 정보를 전달할 수 있다. 컴포넌트에 props 전달 다음과 같은 코드에서는 부모 컴포넌트인 Profile이 자식 컴포넌트인 Avatar에게 props를 전달하지 않는다. export default function Profile() { return ( ); } 만약 Avatar에게 부모 컴포넌트인 Profile의 어떤 정보를 넘겨주고 싶다면 다음과 같이 전달해줄 수 있다. 1단계: 자식 컴포넌트에 props 전달 export default function Profile() { return ( ); } Avatar에게 person이라는 prop으로 객체와 size라는 prop으로 100을 전달해주었다...

JavaScript in JSX with Curly Braces

마크업 내에서 동적 속성을 참조하고 싶을 수 있다. 예를 들어 어떤 태그의 속성에 JavaScript 변수의 값을 넣고 싶을 수도 있다. 그럴 때 중괄호를 사용하면 된다. 따옴표로 문자열 전달 JSX에 문자열 속성을 전달하려면 작은따옴표나 큰따옴표로 묶어야 한다. HTML 삽입 미리보기할 수 없는 소스 위의 img 태그에서 src와 alt는 문자열로 전달이 된다. 하지만 문자열들을 따로 변수로 저장한 뒤에 긴 문자열 대신 변수로 삽입하고 싶다면 중괄호를 이용해서 아래와 같이 하면 된다. HTML 삽입 미리보기할 수 없는 소스 "double curlies" 사용: JSX의 CSS 및 기타 객체 문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에서 객체를 전달할 수도 있다. JavaScript..

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..