React 공식문서

React에서 컴포넌트의 의미 컴포넌트 : 마크업·CSS·JavaScript를 하나로 묶어 UI를 구성하는 재사용 가능한 독립적 화면 단위 > React 컴포넌트는 마크업(HTML)으로 뿌릴 수 있는 JavaScript 함수이다 리액트 컴포넌트 : UI를 만드는 코드

Web이 더욱 인터랙티브해지면서, 로직이 내용을 결정하는 경우가 많아짐. -> JS가 HTML을 담당하게 됨. React에서 렌더링 로직과 마크업이 같은 위치 (= 컴포넌트)에 함께 있게 됨. React Component React Component : Reac

JSX를 사용하면 JS 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 곳에 놓을 수 있다. 문자열 어트리뷰트를 JSX에 전달하려면 작은따옴표나 큰따옴표로 묶어야 한다. src나 alt를 동적으로 지정하기 위해서 따옴표를 { }로 바꿔 JS값을

props: JSX 태그에 전달하는 정보. className, src, width, alt 등은 <img> 태그에 전달할 수 있다person(객체)와 size(숫자) 전달함 props를 사용하면 부모 컴포넌트와 자식 컴포넌트를 독립적으로 생각할 수 있다. Avat

Component: 리액트에서 컴포넌트는 UI를 리턴하는 함수이다. JSX를 리턴하고 화면을 구성함. 위 코드는 사실 내부적으로 아래와 같이 동작한다.조건부로 null 을 사용하여 아무것도 반환하지 않기 조건부렌더링 결과화면위의 코드를 아래와 같이 작성할 수 있다. i

이벤트에 응답하기 React에서는 JSX에 이벤트 핸들러를 추가할 수 있다. 이벤트 핸들러: 클릭, 마우스 호버, 폼 인풋 포커스 등 사용자 상호작용에 따라 유발되는 사용자 정의 함수 이벤트 핸들러 추가하기 아무런 동작도 수행하지 않는 버튼에 이벤트 핸들러를 추가하

컴포넌트는 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. ex. 폼에 입력하면 입력 필드 업데이트, 이미지 캐러셀에서 "다음" 클릭 시 표시되는 이미지 변경 등 이처럼 컴포넌트는 현재 입력값, 현재 이미지, 장바구니와 같은 것들을 기억 해야 하는데, R

컴포넌트를 화면에 표시하기 이전에 React에서 렌더링하는 과정이 필요하다. 코드가 어떻게 실행되는지, React에서는 렌더링 과정이 어떻게 진행되는지에 대해 정리해보고자 한다. 주방 상황에서 요리사가 컴포넌트를 재료로 요리를 한는 상황이라면 React : 고객들의

리액트 앱에서 네비게이션(페이지 이동)을 구현하기 위해 사용하는 표준 라이브러리리액트는 기본적으로 SPA(Single Page Application) 방식이므로 페이지를 이동할 때마다 서버에서 새 HTML을 불러오지 않는다. 대신 주소창의 경로(URL)를 감지하여 그에

state 변수를 설정하면 다음 렌더링이 큐에 들어간다. 그러나 때에 따라 다음 렌더링을 큐에 넣기 전에 값에 대해 여러 작업을 수행하고 싶을 때도 있는데, 이를 위해서 React가 state 업데이트를 어떻게 배치하면 좋을지 이해하는 것이 도움이 된다. 위의 코드를

React의 state는 숫자, 문자열뿐만 아니라 객체도 저장할 수 있다.하지만 React state에 저장된 객체는 직접 수정하면 안 된다.React는 객체 내부의 값이 바뀌었는지를 자동으로 추적하지 않는다.React는 setState 함수를 통해 새로운 값이 전달되