✏️ Describing the UI : Rendering Lists React에서 filter와 map을 이용해 데이터 배열을 필터링하고 컴포넌트 배열로 반환할 수 있다. Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist 이런 콘텐츠 목록이 있을 때, 해당 데이터에 뭔가를 추가하게 되면 수동으로 코드를 고쳐줘야 한다. 이 때 해당 데이터를 구조화 하면 유지보수에도 용이하고 코드의 가독성도 좋아진다. const people..
✏️ Describing the UI : Conditional Rendering 삼항 연산자 상품의 포장 여부를 확인하는 isPacked의 prop에 따라 체크 표시를 주려고 한다. function Item({ name, isPacked }) { if (isPacked) { return {name} ✔; } return {name}; } export default function PackingList() { return ( Sally Ride's Packing List ); } 이런 식으로 prop에 따라 JSX 트리를 다르게 반환하는 경우가 있다. 하지만 prop의 값만 다를 뿐 코드의 중복이 보인다. 이러한 중복은 크리티컬하진 않지만 유지보수에 어려움이 있다. 이와 같은 경우에 조건(삼항) 연산자로 ..
✏️ Describing the UI : Passing Props to a Component Familiar props props란 img 태그에 전달하는 className, alt, src, width...처럼 JSX 태그에 전달하는 정보를 말한다. (사용자가 정의한 컴포넌트는 어떤 props든 전달할 수 있지만 img 태그처럼 전달할 수 있는 props가 미리 정의된 경우도 있다.) Passing props to a component export default function Profile() { return ( ); } Profile 컴포넌트는 자식 컴포넌트인 Avata에 어떤 props를 전달하려고 한다. 이때 2단계에 걸쳐 전달할 수 있다. 자식 컴포넌트에 props 전달하기 예제에서는 pers..
✏️ Describing the UI : JS in JSX with Curly Braces 따옴표로 문자열 전달하기 JSX에 문자열 속성을 전달하려면 작은따옴표 또는 큰따옴표로 묶는다. export default function Avatar() { return ( ); } src나 alt를 동적으로 지정하려면 따옴표를 {}로 대체하면 된다. export default function Avatar() { const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; const description = 'Gregorio Y. Zara'; return ( ); } JSX 내부에서는 중괄호로 두 가지 방법만 사용할 수 있다. JSX 태그 안에 직접 텍스트로 사용하기(⭕️) Grego..
✏️ Describing the UI : Writing Markup with JSX JSX: Putting markup into JavaScript 웹은 HTML, CSS, JS 기반으로 만들어져왔다. HTML로 콘텐츠, CSS로 디자인, JS로 로직을 작성해 각각의 분리된 파일을 관리했다. 하지만 웹의 상호작용이 많아지면서 '로직이 콘텐츠를 결정하는 경우'가 많아졌다. 그래서 JS가 HTML을 담당하게 되었고, 리액트에서 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 존재하게 되었다. 각 React 컴포넌트는 리액트가 브라우저에 마크업을 렌더링할 수 있는 JS 함수다. React 컴포넌트는 JSX라는 구문 확장자로 마크업을 표현한다. JSX은 HTML과 유사해보이지만 보다 엄격하며 동적으로 정보를 표시..
✏️ Describing the UI : Importing and Exporting Components The root component file CRA에서는 앱 전체가 src/App.js에서 실행된다. 설정에 따라 루트 컴포넌트가 다른 파일에 위치할 수도 있고, Next.js처럼 파일 기반으로 라우팅하는 프레임워크의 경우 페이지별로 루트 컴포넌트가 다를 수 있다. 리액트에서 루트 컴포넌트는 애플리케이션 내의 최상위 엘리먼트를 의미한다. 일반적으로 리액트 앱에 진입점 역할을 하는 public/index.html 파일 내의 DOM 노드로 표시된다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // ..
✏️ Describing the UI : Your First Components Components: UI building blocks 컴포넌트는 리액트의 핵심 개념 중 하나로 UI를 구축하는 기반이다. 웹에서는 HTML 태그로 풍부한 구조의 문서를 만들 수 있다. 리액트를 사용하면 마크업, CSS, JS를 컴포넌트로 결합해 재사용할 수 있다. 이 때 컴포넌트란 앱에서 재사용 할 수 있는 UI 요소라고 이해하면 된다. 리액트 앱에서 모든 UI는 컴포넌트로 구성된다. 컴포넌트를 재사용하는 것은 여러 가지 이점이 있지만, 가장 대표적으로 빠르게 다양한 화면을 개발할 수 있다는 점이다. n개의 동일한 UI를 만드는 것과 컴포넌트를 사용해 동일한 UI를 n번 사용하는 것을 상상하면 당연히 후자가 빠를 것이다. ..
