개요. 렌더링 이해하기리액트에서 렌더링이란 컴포넌트 함수를 호출하는 것이다. 렌더링 그리고 커밋 – ReactThe library for web and native user interfacesko.react.devReact 공식 문서에서는 렌더링 과정을 세 가지 단계로 정의한다. 1. 렌더링 트리거 (손님의 주문을 주방으로 전달)2. 컴포넌트 렌더링 (주방에서 주문 준비)3. DOM에 커밋 (손님 테이블에 요리 제공) 1단계. 렌더링 트리거컴포넌트 렌더링이 일어나는 데에는 두 가지 경우가 있다.1. 컴포넌트의 초기 렌더링인 경우2. 컴포넌트의 state가 업데이트된 경우 (useState!) Case 1. 렌더링 트리거 - 컴포넌트 초기 렌더링ReactDOM.createRoot(document.getEl..

1. 이벤트 핸들러React에서 이벤트 핸들러(Event Handler)는 사용자의 행동(이벤트)에 응답하여 특정 동작을 수행하는 함수이다.ex 버튼을 클릭할 때, 입력창에 텍스트를 입력할 때 수행할 동작을 정의하는 것. 2. 이벤트 핸들러 정의하기2.1 이벤트 핸들러 사용하기그냥 이벤트 발생 시 동작할 함수를 정의하면 된다. function onClick(){ alert('클릭하셨네요!'); } 이렇게 만든 함수를 JSX에 onClick의 props로 넘겨주면된다.function HeartIconBtn(){ function onClick(){ alert('클릭하셨네요!'); } return ( )}..

1. 리스트 렌더링리액트에서 유사한 컴포넌트를 여러 개 표시하고 싶을 때 리스트 렌더링을 사용한다.이 경우 React에서 map()과 filter()를 사용해 데이터 배열을 필터링하고 컴포넌트 배열로 변환하여 렌더링 할 수 있다. 2. 배열을 데이터로 렌더링하기2.1 배열 렌더링하const people = [ 'Creola Katherine Johnson: mathematician', 'Mario José Molina-Pasquel Henríquez: chemist', 'Mohammad Abdus Salam: physicist', 'Percy Lavon Julian: chemist', 'Subrahmanyan Chandrasekhar: astrophysicist'];이러한 배열 값들을 Cr..

1. 조건부 렌더링 컴포넌트는 조건에 따라 다른 항목을 표시해야 하는 경우가 많다. React는 if 문, && 및 ? : 연산자와 같은 자바스크립트 문법을 사용하여 조건부로 JSX를 렌더링할 수 있다. 2. 조건부로 JSX 반환하기2.1 if 문 사용하기function Item({ name, isPacked }) { if (isPacked) { return {name} ✔; } return {name};}이렇게 isPacked prop이 true이면 이 코드는 다른 JSX 트리를 반환합니다. 이로 인해 일부 항목은 끝에 체크 표시가 있도록 렌더링할 수 있다. 2.2 조건부로 null을 사용해 아무것도 반환하지 않기function Item({ name, isPacked }) { if (isPack..

1. Props리액트 컴포넌트는 props를 이용해 서로 통신합니다. 모든 부모 컴포넌트는 자식 컴포넌트에게 props를 사용하여 정보를 전달할 수 있습니다. props는 HTML 어트리뷰트를 생각나게 할 수도 있지만, 객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있습니다. 2. 컴포넌트에 Props 전달하기export default function Profile() { return ( );} Profile 컴포넌트는 자식 컴포넌트인 Avatar에 어떠한 Props도 전달하고 있지 않다.다음 두 단계를 걸쳐서 Props를 전달하고 사용해보자! 2.1 자식 컴포넌트에 props 전달하기먼저 자식 컴포넌트인 Avatar에 몇몇 props를 전달하자.여기서는 person ..

1. 개요 JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 비지니스 로직 또한 작성할 수 있다.export default function CourseItem(props) { const isEmpty = true; if (isEmpty) { return ( 강의가 없습니다. ) } return ( 입문자를 위한, HTML&CSS 웹 개발 입문 웹 개발에 필요한 기본 지식을 배웁니다. );}위와 같이 const isEmpty로 변수를 설정하고 if(isEmpty)와 같은 비지니스 로직을 정할 수 있다.JSX에서 중괄호({})를 사용하여 JavaScript 변수와 비지니스 ..

1. JSX란 JSX는 JavaScript를 확장한 문법으로, JavaScript 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해줍니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자는 JSX의 간결함을 선호하며 대부분의 코드 베이스에서 JSX를 사용합니다. https://ko.react.dev/learn/writing-markup-with-jsx JSX로 마크업 작성하기 – ReactThe library for web and native user interfacesko.react.dev 그러나 JSX는 HTML보다 엄격한 규칙을 가지고 있기 때문에 다음 규칙(가이드)를 따라야한다! 2. JSX 규칙2.1 하나의 루트 엘리먼트로 반환하기한 컴포넌트에서 여러 엘리먼트를 반환하..

1. 개요React 프로젝트 생성 방법에는 CRA(Create-React-App)과 Vite를 사용한 방법이 있다.이중 Vite를 사용해 React 프로젝트를 생성해보자 2. Vite란Vite는 프랑스어로 '빠른' 이라는 뜻이다.웹팩 같은 기존의 번들러가 가지는 느린 개발 서버 문제점을 해결하기 위해 나타났다. 3. 방법3.1 vite로 react 프로젝트 생성npm create vite@latest // 최신 버전npm create vite@[버전명] // 특정 버전 다음과 같이 vite로 React 프로젝트를 생성한다.cd learn-react/ 로 디렉토리 위치를 변경한 다음 code . 를 실행해 VS Code로 열도록하자.폴더를 보면 create-react-app과 다르게 node_modul..

1. 개요node.js를 제대로 설치하기 위해 버전 관리 툴인 nvm을 설치해보자 2. NVMNode.js를 특정 버전으로 다운로드할 수도 있다.또한 여러 버전의 Node.js를 관리하고 전환할 수 있는 유틸리티이다.nvm을 사용하면 특정 프로젝트에 필요한 Node.js 버전을 손쉽게 설치하고 변경할 수 있다는 점이 장점! 3. 설치 방법윈도우는 https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com이 페이지에..