dada's

context : react 컴포넌트 트리 안에서 전역적으로 필요한 데이터(state, function)를 props대신 사용하며 react 16버전 부터 사용 할 수 있는 내장 api이다. 하지만 꼭 전역적일 필요는 없고 컴포넌트간에 데이터를 전달하는 방법이라고 생각하면 된다. 그렇지만 context는 전체적인 상태관리를 위해 만들어진게 아니다. 데이터를 쉽게 사용하기 위해 만들어졌다. context를 사용 할 경우 props가 가지고 있던 문제 props drilling을 해결 할 수 있다. [ context를 자주 사용하는 데이터 종류 ] 1. 테마 데이터 (다크모드 & 라이트 모드) 2. 사용자 데이터 (현재 인증된 사용자) 3. 로케일 데이터 (언어, 지역) [ 사용방법 ] 1. createCo..

React Hook : react 16.8버전부터 react요소로 추가되었다. Hook을 이용하여 기존 class바탕의 코드를 작성 할 필요 없이 함수형태에서 상태 값과 여러 react의 기능을 사용할 수 있는 기술들 [ React Hook종류 ] • useState : 컴포넌트의 상태값을 관리할때 사용된다. 기본적으로 상태값과 상태값을 변경할 수 있는 set함수를 정의해준다. // 불러오기 import React. { useState } from 'react' // useState선언 const [count, setCount] = useState(0) • useEffect : 컴포넌트가 마운트 됐을때 (처음 나타났을 때), 언마운트 됐을때 (사라질 때), 그리고 업데이트 될 때(특정 props가 바뀔 ..

React Component - 리액트로 만들어진 앱을 이루는 최소한의 단위 - 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재활용 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다. - 컴포넌트는 데이터(props)를 입력받아 상태(state)에 따라 DOM node를 출력하는 함수이다. - 컴포넌트 이름은 항상 대문자로 시작한다. (리액트는 소문자로 시작하는 컴포넌트를 DOM태그로 취급하기 때문) - UI를 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 나누어 코딩한다. - props를 입력 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한..

JSX - 리액트에서 사용하는 문법으로 자바스크립트에서 html문법을 사용하여 렌더링 로직과 ui 로직의 결합을 쉽고 보기좋게 표현하기 위해 만들어졌다. - 템플릿 문법이 아닌 자바스크립트 함수나 클래스 형태로 ui로직이 결합 되어있다. - 리액트 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환한다. [ JSX문법 ] 1. 반드시 부모 요소 하나가 감싸는 형태여야 한다. (virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.) // 이렇게 작성시 에러남 function App() { retur..