리액트 정복하기

DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 모델이다.HTML 요소들은 DOM 트리 구조로 표현된다. ex) <div>나<h1> 같은 태그들이 DOM의 노드(node)로 나타난다. root DOM node는 리액트가 렌더링

리액트를 처음 공부 할 때 createElement() 함수를 배우는 이유는 리액트의 JSX가 결국 이 함수로 변환되기 때문이다!!!!JSX는 코드 작성이 직관적이고 편리하게 만들어졌지만, 내부적으로는 React.createElement()를 통해 실제 DOM 요소로

JSX는 리액트에서 HTML과 자바스크립트를 함께 사용할 수 있도록 도와주는 문법 확장이다.쉽게 말해, HTML처럼 보이는 코드를 작성하지만 실제로는 자바스크립트로 변환된다.HTML처럼 보이지만 자바스크립트 코드이다.브라우저가 JSX를 직접 실행하지는 않고, 리액트가

리액트를 공부하고 있는데.. 아직 너무 어렵다 그래서 전체적인 과정을 이해하고 넘어가야 할 거 같다 ㅠ.ㅠ 1. 동작 과정 1. Book 컴포넌트 function Book(props) { return ( 이 책의 이름은 {props.name}입니다

리액트 개발에는 정해진 순서는 없고, 프로젝트의 요구사항과 개발자 스타일에 따라 달라질 수 있다고 한다.하지만 나는 효율적인 코드 작성법이 궁금하였다.이유:하위 컴포넌트는 상위 컴포넌트에 포함될 재사용 가능한 작은 단위이다.먼저 하위 컴포넌트를 개발하면, 상위 컴포넌트

리액트에서 export default Book;는 Book 컴포넌트를 외부에서 사용할 수 있도록 내보내는 역할을 한다. 닫아야 하는 이유를 설명하면 다음과 같다.ES6 모듈 시스템의 문법으로, 해당 파일에서 기본(default)으로 내보낼 값(또는 컴포넌트)을 지정한다

1. 리액트 엘리먼트란? 리액트 엘리먼트는 리액트가 화면에 보여줄 UI의 가장 작은 단위이다. 예: JSX에서 다음과 같이 작성한 코드: 위 코드는 리액트 내부적으로 엘리먼트 객체로 변횐 된다. 이 객체는 리액트가 UI를 효율적으로 관리하기 위해 사용하는 데이터

앞서 간단하게 root DOM node에 알아본 적이 있는데 이해가 정확히 되지 않아다시 한 번 짚으면 좋을 거 같아서 정리해본다!중요한 부분인 만큼 확실하게 넘어가장root DOM node는 리액트 어플리케이션이 브라우저의 HTML 페이지에 렌더링되는 시작점이다. 리

리액트를 처음 배우는 입장에서 "컴포넌트는 무엇이고, props는 왜 필요한지"가 혼란스러웠다..한 번 알아보장리액트 컴포넌트는 UI(화면)을 만드는 가장 기본적인 단위이다.리액트 컴포넌트를 함수로 생각하면 쉽게 이해할 수 있다.함수는 입력(input)을 받아서 출력(

공부를 하다가 JSX에서 중괄호 { }를 사용할 때와 사용하지 않을 때의 차이가 궁금해서알아보려고 한다!!!문자열이 아닌 자바스크립트 표현식(변수, 함수 호출, 숫자, 논리 연산 등)을 JSX에서 사용하려면 중괄호 {}가 필요하다.JSX에서는 중괄호 내부의 코드를 자바

컴포넌트 추출이란 복잡한 컴포넌트를 작은 컴포넌트로 나누어 코드의 가독성과 재사용성을 높이는 작업이다. 큰 컴포넌트를 그대로 유지하면 코드를 관리하기 어렵고, 재사용하기 힘들다.특정 부분을 작은 컴포넌트로 분리하면:가독성이 좋아지고,재사용성이 높아지며,유지보수가 쉬워진

리액트를 공부 할 때 state가 왜 중요한지, 그리고 리액트를 사용하는 사람이라면 왜 알아야 하는지 궁금하였다.state는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하기 위한 객체이다.컴포넌트의 현재 상태를 나타낸다.컴포넌트 내부에서 데이터가 변하면 화면(UI)를

state는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하는 데 사용되는 객체이다.컴포넌트의 현재 상태를 저장.사용자와의 상호작용이나 이벤트 발생에 따라 값이 변경될 수 있음.값이 변경될 때 자동으로 화면(UI)을 다시 렌더링.단순히 정적인 텍스트나 이미지를 표시하는

useEffect는 React에서 함수형 컴포넌트에 사이드 이펙트(부가 작업)을 처리하기 위해 사용하는 훅이다.React 애플리케이션에서 흔히 쓰이는 개념이다.React 컴포넌트가 렌더링될 때와 상태(state)나 props가 변경될 때 특정 작업(부가 작업)을 수행하

useMemo는 React에서 비싼 계산 작업을 메모이제이션(Memoization)하여 렌더링 성능을 최적화하기 위해 사용되는 Hook이다.목적: 계산 비용이 높은 작업이 반복적으로 실행되는 것을 방지하기 위해 사용한다.동작 원리:useMemo는 특정 의존성(배열) 값

useCallback은 리액트 컴포넌트에서 함수를 메모제이션(Memoization) 하는 데 사용되는 훅이다.쉽게 말해, 불필요하게 함수를 다시 생성하지 않고, 이전에 생성한 함수를 재사용 하는 기능을 제공한다.컴포넌트가 렌더링될 때마다 함수가 새로 생성되는데, 어떤

useRef는 React에서 특정 DOM 요소에 직접 접근하거나 값을 유지하는 데 사용되는 훅이다.useRef는 Ref 객체를 반환한다. 이 객체는 .current라는 속성을 가지고 있으며, DOM 요소 또는 임의의 값을 저장할 수 있다.Ref 객체는 컴포넌트가 다시

리액트에서 Hook은 강력한 기능을 제공하지만, 이를 올바르게 사용하기 위해 반드시 지켜야 할 규칙이 있다.이 규칙들은 리액트가 컴포넌트의 생명주기를 정확히 관리할 수 있도록 보장해 주는 역할을 한다.Hook은 컴포넌트의 최상위 레벨에서만 호출해야 한다.즉, 조건문,

이 부분은 커스텀 훅(Custom Hook)을 만드는 방법을 설명한다.커스텀 훅은 React에서 자주 사용되는 반복적인 로직을 재사용하기 위해 만들어지는 사용자 정의 함수이다.예제로는 사용자 온라인/오프라인 상태를 확인하는 컴포넌트를 만들고 있다.UserStatus라는

리액트에서 이벤트를 처리하는 방법은 DOM과 약간 다르다.onclick 속성에 함수 이름을 문자열로 지정한다.이 방식은 DOM의 기본적인 이벤트 처리 방식이다.리액트에서는 다음처럼 카멜 표기법(camelCase)을 사용한다.onClick: DOM 이벤트와 달리 첫 글자

React에서 이벤트 핸들러 함수에 특정 데이터를 전달해야 하는 경우가 종종 있다.여기에서 설명된 예제는 버튼을 클릭할 때 특정 ID를 이벤트 핸들러에 전달하는 방법이다.Arrow Function 사용버튼이 클릭될 때, (event)라는 함수가 호출된다.this.del

조건부 렌더링은 말 그대로 조건에 따라 렌더링할 내용을 다르게 표시하는 것을 말한다.예를 들어, 사용자가 로그인을 했는지 여부에 따라 화면에 다른 메시지를 보여주는 경우를 생각해 보자.조건이 true라면 특정 컴포넌트를 보여주고, 조건이 false라면 다른 컴포넌트를

설명LoginButton과 LogoutButton은 각각 "로그인" "로그아웃" 버튼을 렌더링하는 컴포넌트이다.props.onClick은 부모 컴포넌트에서 전달받은 클릭 이벤트 핸들러이다. 버튼을 클릭하면 해당 핸들러가 실행 된다.useState(false)컴포넌트 상

인라인 조건 렌더링은 JSX 안에서 조건에 따라 컴포넌트나 요소를 동적으로 렌더링할 때 사용된다.&& 연산자:javascrip에서 &&는 "논리 AND 연산자"입니다.앞의 조건이 true일 때만 뒤의 내용을 평가한다.조건이 false라면 뒤의 코드는 아예 실행되지 않으

역할: props.warning의 값에 따라 특정 메시지를 표시하거나 아무것도 렌더링하지 않는 컴포넌트이다.props.warning이 false일 경우 return null;을 통해 아무것도 렌더링하지 않는다.props.warning이 true일 경우 <div>경

리스트는 목록을 의미한다.프로그래밍에서 리스트는 동일하거나 유사한 아이템들을 순서대로 나열한 데이터 구조를 말한다.예를 들어, 아래와 같은 숫자 목록이 있다.위 코드에서 numbers는 숫자들이 나열된 배열(Array)이다.배열은 자바스크립트에서 리스트를 표현하는 가장

map() 함수는 자바스크립트 배열 메서드 중 하나로, 배열의 각 요소에 대해 주어진 함수를 실행하고 그 결과로 새로운 배열을 반환한다.예시 코드:여기서 map()은 각 number에 대해 number \* 2를 실행하고 그 결과 배열을 반환한다.React에서 map(

폼(form)은 사용자로부터 입력을 받기 위한 HTML 태그이다. 예를 들어, 이름을 입력 하거나 제출 버튼을 클릭하는 인터페이스가 폼이다.HTML 폼은 <form> 태그를 사용하며, 내부에 <input> 같은 입력 필드나 <button> 같은 버튼이

form 태그는 HTML에서 사용자의 입력을 서버에 제출(submit)하기 위해 사용된다.예제 코드에서 사용된 input 태그를 통해 사용자는 텍스트를 입력하고, button 태그의 타입을 submit으로 설정하여 제출할 수 있다.이 방식은 HTML 고유의 기능이지만,

Reservation 컴포넌트는 호텔 예약을 위한 폼을 구성하며, 두 개의 입력 필드를 처리한다.useState로 상태 선언:haveBreakfast: 아침식사 여부를 저장하는 boolean 값. 초기값은 true.numberOfGuest: 방문자 수를 저장하는 숫자.

Shared State는 이름 그대로 공유된 상태를 의마한다.여러 컴포넌트가 동일한 데이터를 필요로 할 때, 데이터를 각각의 컴포넌트 내부에 따로 정의하지 않고, 공통된 부모 컴포넌트에서 상태를 정의하여 하위 컴포넌트들이 이를 공유하는 방식이다.부모 컴포넌트의 stat

Containment는 컴포넌트 안에 하위 컴포넌트를 포함하는 형태의 합성 방법이다.React에서 props.children을 사용해 하위 컴포넌트를 전달하고 렌더링할 수 있다.FancyBorder 컴포넌트는 props.children을 사용해 내부에 하위 요소를 포함

React에서 Context는 컴포넌트 간 데이터를 전달하기 위한 새로운 방법이다. 기존에는 부모-자식 관계를 통해 props를 통해 데이터를 전달해야 했지만, 컴포넌트 계층이 깊어질수록 코드가 복잡해지는 단점이 있었다. Context를 사용하면 중간에 있는 컴포넌트들

React.createContext()는 Context 객체를 생성한다. Context는 컴포넌트 트리 전체에서 데이터를 전역적으로 전달할 수 있게 해준다.createContext()의 기본값은 Context의 상위에 Provider가 없을 때 사용 된다.Provide

React에서 컨텍스트 API를 함수형 컴포넌트에서 쉽게 사용할 수 있게 해주는 훅이다.컨텍스트를 사용하여 데이터를 컴포넌트 트리 전체에 전달할 때, useContext를 사용하면 중간 컴포넌트들이 데이터를 전달할 필요 없이 가장 가까운 상위 Provider에서 값을

자 이제 css에 대해서 공부 할 차례... 당연히 리액트를 하려면 css를 알아야겠지? 1. CSS란? CSS(Cascading Style Sheets)는 HTML 요소에 스타일을 적용하기 위한 언어이다. CSS는 "Cascading(계단식)"이라는 이름처럼 여러