리액트

UI를 interactive하게 만들기 위해서!! 이것이 리액트가 만들어진 이유.왜 React JS가 Super cool한지 Vanilla JS와 React JS를 비교해보며 Araboza!React JS는 interactive한 UI를 만들 수 있게 해주는 엔진 역할

인용자료 출처\[React] Vite로 react 프로젝트 시작하기

자바스크립트의 확장형 문법Javascript + XML/HTML 을 결합한 형태내부적으로 XML/HTML 코드를 Javscript로 변환React.createElement()는 JSX를 이용해 자바스크립트 객체(React element)를 반환

1. Element(React element)란? 리액트 앱을 구성하는 가장 작은 블록들 DOM Element의 가상 표현 화면에 보이는 것을 기술함. (React element의 내용을 기반으로 실제 DOM element가 생성됨) 2. Element의 형태 R

컴포넌트를 조립하고 모아서 개발하는 방식Component는 JS의 함수와 비슷한 방식 -> (입력값을 받아 정해진 출력을 내보냄)JS 함수와는 다르게 props를 입력으로 받고, React element를 출력으로 내보냄.React Component는 속성들(props

React Component의 바뀌는(변경 가능한) 데이터State는 사전에 정해진 것이 아닌 개발자가 직접 정의한다.렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다!→ 불필요한 재렌더링을 방지하기 위함 <span style = "back

기존 함수 컴포넌트는 클래스 컴포넌트의 기능(state, lifecycle method)을 사용할 수 없었음Hook을 이용하면 클래스 컴포넌트의 기능을 함수 컴포넌트 내에서 동일하게 구현 가능.state와 생명주기 기능 등에 갈고리를 걸어 (함수 컴포넌트 내에서) 원하

state를 사용하기 위한 HookuseState() 사용법 ⭐⭐useState() 사용 예시Side effect를 수행하기 위한 Hook리액트에서의 Side effect → 효과, 영향서버에서 데이터를 받아오거나, 수동으로 DOM을 변경하는 등의 작업을 의미 다른 컴

Memoized value를 리턴하는 Hook<span style='background-color: - 결과값을 메모를 해뒀다가 필요할 때 다시 활용하는 방식useMemo()사용법useMemo() Hook과 유사하지만 값이 아닌 함수를 반환<span st

<span style='background-color: - ex) 버튼 클릭 이벤트, 키보드 입력 이벤트 etc….DOM Event vs React EventDOM과 React는 모두 이벤트를 사용할 수 있지만 사용 방법에는 차이가 존재어떠한 사건(ev

<span style='background-color: Conditional Rendering 예시Truthy → True는 아니지만 True로 여겨지는 값Falsy → False는 아니지만 False로 여겨지는 값리액트 엘리먼트를 변수처럼 저장하여 사용하는 방법

같은 종류의 아이템을 순서대로 모아놓은 형태List를 위해 사용하는 자료구조는 <span style="background-color: - Array : Javascript의 변수나 객체들을 하나의 변수로 묶어둔 것React에서는 배열을 사용해서 리스트 형태로

사용자가 선택해야 하는 모든 것을 의미사용자로부터 입력을 받기 위해 사용HTML Form vs React FormReact는 컴포넌트 내부에서 state를 통해 데이터를 관리HTML Form은 Element 내부에 각각의 state가 존재HTML Form 예시사용자가

1. Shared State ⭐⭐⭐ 공유된 state 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 state를 공유하여 사용하는 것 (== 하위 컴포넌트가 공통된 상위 컴포넌트의 state를 공유하여 사용하는 것) 특정 컴포넌트의 state에 있는 데이터를

여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것여러 컴포넌트를 어떻게 조합할 지에 따라 composition의 사용 기법이 달라짐Contain: 담다, 포함하다.\*\*<span style = 'background-color: Sidebar나 Dialog