react

나무위키 https://namu.wiki/w/React(%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC)React (ReactJS)는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리원저자 : Jordan W

npm : https://www.npmjs.com/yarn : https://yarnpkg.com/Webpack 과 Babel 같은 도구들은 자바스크립트 런타임인 Node.js 환경에서 만들어져있습니다. 그렇기에 해당 도구들을 사용하기 위해서 Node

JSX = JavaScript + XML/HTMLA syntax extension to JavaScript (자바스크립트의 확장 문법)OPL)00대입 연산자를 통해 Html 코드를 변수에 저장한다.코드가 간결해진다.가독성이 향상된다.큰따옴표 사이에 문자열을 넣거나중괄호

변수는 let, const 키워드를 사용하여 선언한다.템플릿 문자열은 문자열 안에 변수와 연산식을 넣을 수 있습니다.템플릿 문자열을 사용하여 다음 문장을 출력해보세요.대괄호 안에 있는 내용은 변수로 대체합니다.조건 ? 참 : 거짓위의 코드를 삼항 연산자로 표현하면 다음

컴포넌트란 재사용 가능한 UI 조각을 의미한다.컴포넌트를 이용하면 더 쉽게 UI를 재사용할 수 있고, 유지보수도 쉬워진다.컴포넌트는 독립적이고 재사용 가능하며, 여러 컴포넌트를 조합하여 화면을 구성할 수 있다.컴포넌트는 트리 형태로 구성되어 있으며, 최상위 컴포넌트는

컴포넌트의 속성을 설정할 때 사용하는 요소이다.컴포넌트에게 전달되는 데이터를 의미한다.Components로 고양이를 계속 만들어낼 수 있다면...Props로 서로 다른 고양이를 만들어낼 수 있다.이미지 출처컴포넌트의 속성(props)은 컴포넌트를 사용할 때 설정하는 속

이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 말한다.이벤트를 사용할 때는 on이벤트명={이벤트 핸들러} 형식으로 사용한다.이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수로 함수의 형태로 작성해야 한다.이벤트 핸들러에 ()를 붙이지 않는 이유는

상태(State)란 컴포넌트가 가질 수 있는 동적인 데이터를 의미합니다.사용자가 입력한 텍스트현재 선택된 메뉴 항목토글 버튼의 on/off 상태서버에서 받아온 데이터useState 기본 문법 설명리액트 컴포넌트는 입력과 출력이 있는데 prop를 통해 입력된 데이터를 우

todo-Todo 디렉토리를 생성 후 프로젝트를 생성합니다.https://ko.react.dev/learn/start-a-new-react-projectTodoItem 컴포넌트를 TodoList 컴포넌트에서 렌더링을 연습합니다.Todo 컴포넌트 : 할 일 데이

React에서 컴포넌트의 생명주기를 관리하는 것은 앱의 성능과 유지보수성에 중요한 영향을 미칩니다. 특히, 함수형 컴포넌트에서는 useEffect 훅을 사용하여 이러한 관리 작업을 수행합니다.데이터를 불러와 화면에 표시하는 간단한 뉴스 목록 컴포넌트를 생각해볼 수 있습

useReducer 는 useState 보다 더 다양한 컴포넌트 상태를 관리하는 Hook 입니다. useState 는 컴포넌트 상태를 관리하는 가장 기본적인 Hook 이지만, useReducer 는 복잡한 상태 로직을 다루기에 더 적합합니다.컴포넌트에서 상태 변화 코드

리액트의 하나의 컴포넌트에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 여러 방법이 있습니다.state 와 props를 사용해서 컴포넌트 간에 데이터를 전달React Context는 Component 트리 전체에 props를 전달하지

Redux는 상태 관리 라이브러리로, React와 함께 사용하기 좋습니다. Redux를 사용하면 컴포넌트 간에 상태를 쉽게 공유할 수 있습니다.Single Source of Truth: 애플리케이션의 상태는 하나의 스토어에 저장됩니다.State is Read-Only:

리액트에서의 최적화 기법은 불필요한 연산을 줄여 성능을 향상시키는 것입니다.리액트 공식 문서에서는 성능 최적화를 위한 방법을 다음과 같이 소개합니다.코드, 폰트, 이미지 등의 리소스를 압축합니다.메모이제이션을 이용하여 불필요한 연산을 줄입니다.메모이제이션이란 연산의 결