리액트

요청에 맞는 컴포넌트만 라우팅하여 부분적으로 렌더링요청에 맞는 컴포넌트를 매칭하기 위해 react-router-dom 사용BrowserRouter, Route, Switch, Link 등을 불러옴HTML5의 history API를 활용하여 UI 업데이트URL의 hash

자바스크립트의 영역 확장웹 뿐만 아니라 서버, 모바일, 데스크톱 애플리케이션까지 개발대규모 애플케이션 구조를 관리하기 프레임워크 등장\- 프레임워크들은 주로 MVC, MVVM 아키텍처 사용 👉 MVC : Model - View - Controller 👉 MVVM :

JSX는 자바스크립트 확장 문법번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태로 코드 변환가독성이 높고 작성하기 쉽다HTML 태그 뿐만 아니라 컴포넌트도 작성할 수 있음여러 요소가 있다면 반드시 부모 요소 하나로 감싸야함div 요소 말고 Fragment, &

리액트에서는 클래스형 과 함수형 컴포넌트를 두 가지 방식으로 선언한다.클래스형 컴포넌트👉 state 기능 및 라이프사이클 기능을 사용할 수 있다.👉 임의의 메소드를 정의할 수 있다.👉 render() 함수가 반드시 있어야 한다.함수형 컴포넌트👉 선언하기 더 편하

웹 브라우저의 HTML 이벤트와 인터페이스가 동일하다.이벤트 이름은 카멜 표기법으로 작성한다.이벤트에 실행 코드가 아닌 함수 형태의 값을 전달한다.DOM 요소 에만 이벤트를 설정할 수 있기에 컴포넌트 에는 적용되지 않는다.함수가 호출될 때 this는 호출부에 따라 결정

reference 의 준말로 리액트 내부에서 DOM 에 이름을 다는 방법이다.DOM 을 직접적으로 건드려야 할 때 사용한다.DOM 을 꼭 사용해야하는 상황 예시👉 특정 input 에 포커싱을 줄 때👉 스크롤 박스를 조작할 때👉 Canvas 요소에 그림을 그릴 때r

반복되는 태그들을 효율적으로 관리하기 위해 사용한다.자바스크립트 배열 메소드인 map 함수 를 활용해 반복되는 컴포넌트를 관리한다.리액트에서는 컴포넌트 배열을 반복할 때 key prop 을 요구한다.key 를 설정하는 이유🤜 어떤 원소에 변동이 있었는지 알기 위함이다

컴포넌트는 페이지에 렌더링 되기 전부터 사라질 때 까지의 라이프사이클이 존재한다.초기 렌더링, 업데이트 전/후 작업, 불필요한 업데이트 방지 등의 기능을 할 수 있다.클래스형 컴포넌트에서만 사용할 수 있고 함수형 컴포넌트에서는 사용할 수 없다.함수형 컴포넌트에서는 Ho

리액트 v16.8에 새로 도입된 기능이다.함수형 컴포넌트에서도 상태관리를 할 수 있는 useState , 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다.함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.useState 함수의 파리미터에 상

리액트 프로젝트에서 전역으로 사용할 데이터가 있을 경우 사용한다.사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등을 예로 들 수 있다.리덕스나 MobX 같은 상태 관리 라이브러리 를 사용하여 전역 상태 관리 작업 을 더 편하게 처리할 수 있다.createConte

리덕스는 리액트 상태관리 라이브러리다.이외에도 MobX, Recoil, Context API 등 상태관리를 위한 다양한 라이브러리, 리액트 자체 솔루션이 있다.상태를 체계적으로 관리할 수 있다.유지 보수성과 작업의 효율성을 높여준다.개발자 도구를 지원하고 미들웨어 기능

프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리한다.프레젠테이셔널 컴포넌트👉 상태관리가 이루어지지 않고 Props 를 받아와 UI 를 보여주기만 하는 컴포넌트컨테이너 컴포넌트👉 리덕스로부터 상태를 받아오고 액션을 디스패치하는 리덕스와 연동된 컴포넌트일반적인 구조는