29 docs tagged with "React"

- 리액트는 훅이 나오기 전까지 상태관리는 클래스 컴포넌트로 만들어 구성하였다.

- 리액트 훅이 나오고 난 이후 최근 대부분의 리액트 앱은 함수형으로 구성된다.

- create-react-app 으로 만든앱에서 components 디렉토리를 만든다.

- React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋다.

- 조건부 렌더링은 말 그대로 조건에 맞는 경우에 해당하는 컴포넌트를 보여주는 것이다.

- html에 react를 cdn으로 받아서 사용하는 방법은 일반적이지 않다.

- React Event 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SynthenticEvent 객체를 전달받는다.

- 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조직을 개별적으로 관리할 수 있다.

- Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있는 내장 라이브러리이다.

- React 에서 기존 html 소스를 그대로 가져와 사용할 수 있다

- phoneNumber input 태그에 값이 0부터 시작되면 valid, 1부터 시작되면 invalid 하게 처리하는 로직을 구현한다.

- hook이 호출되는 타이밍을 확인하기 위해 간단한 예제를 구현한다.

Hook Flow 이해하기 더 깊이

개요

Clean-up을 이용하지 않는 Effects

- 커스텀 훅은 여러 Hook들을 모아 놓은 함수이다.

JS와 JSX 함께 사용하기

- 바닐라 JS에서는 getElementById('').focus()로 포커스를 준다.

제어 컴포넌트

- 일반적인 css로 html에 element에 스타일을 넣어주는 방식과 크게 다르지 않다.

- JS에러 발생 시 React 뷰를 보여주지 못하고 에러가 발생할 수 있다.

- 투두 리스트를 삭제하고 되돌리는 프로그램을 구현해보자.

리스트 변환

- 뷰모 뷰에서 하위 뷰의 상태 값을 사용해야 하는 경우 부모 뷰에서 상태를 선언하고 하위 뷰에 상태를 주입하여 사용할 수 있다.

- input 필드와 button을 구현한다.

이벤트

- useState, useEffect이 여러번 사용되면, 문맥에 따라 hook들을 묶어서 커스텀 훅으로 만들 수 있다.

- 부작용, 의도하지 않은 효과

- DOM은 논리 트리, 컴포넌트는 엘리먼트의 집합, 엘리먼트는 요소이다.