리액트를 다루는 기술 정리
1.리액트 정리 카테고리
이 글은 리액트를 다루는 기술을 정리하기 위한 블로그입니다.
2.1. 리액트의 시작하기
리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다.사용자에게 처음 화면에 어떻게 보여질지를 정하는 렌더링이 필요합니다. 리액트에서는 이를 render 함수가 수행합니다. 이 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
3.2. JSX
JSX란 컴포넌트의 UI를 표현하기 위해서 사용하는 자바스크립트 확장 문법입니다. JSX는 브라우저에서 실행될 수 없기 때문에 바벨을 통해 일반 자바스크립트 형태로 변환되는 과정을 거쳐야 합니다. 주로 클래스형 컴포넌트의 render 함수, 함수형 컴포넌트의 retur
4.3. 리액트 컴포넌트
UI를 재사용 가능한 여러 조각으로 나누어 놓은 것이 컴포넌트입니다.리액트에서는 컴포넌트를 정의하는 방법으로 2가지를 제공하고 있습니다. 함수형 컴포넌트와 클래스형 컴포넌트입니다.Props는 부모 컴포넌트가 자식 컴포넌트에게 값을 할당하는 방법입니다. 이때, 자식 컴포
5.4. 이벤트 처리하기
사용자와 DOM 요소들과 상호작용하는 것을 이벤트라고 합니다. React에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사합니다.HTML에서는 onclick으로 모두 소문자로 사용하지만, 리액트에서는 onClick으로 작성합니다.HTML에서
6.5. Hook - 1(useState, useEffect)
Hook은 리액트 16.8 버전에 새롭게 추가된 기능입니다. Hook이 추가되면서 클래스형 컴포넌트를 작성하지 않고도 함수형 컴포넌트내에서 상태를 관리할 수 있게 되었고, 추가적인 기능들을 제공하게 되었습니다.useState는 가장많이 사용되는 Hook 중 하나일 것입
7.6. Hook - 2
useMemo를 사용하면 연산을 최적화할 수 있습니다. 두번째 파라미터로 전달된 의존성 값이 변경될때만 전달 된 함수를 실행하게 됩니다.아래와 같이 코드를 작성 후 input 창에 값을 입력할때마다 콘솔이 찍히는 것을 확인할 수 있습니다.useMemo를 이용해서 의존