ReactBasic

create-react-app 을 통해 리액트 개발환경을 구축한다.

리액트로 만든 페이지는 컴포넌트로 구성되어있다. 페이지 단위로 html 을 작성하는 것이 아니라, 각 부분을 컴포넌트로 만들고 조율해서 사용한다. 함수로 만들어진 컴포넌트를 함수형 컴포넌트라고 한다. 모든 컴포넌트는 대문자로 시작해야한다. App 함수가 리턴하는 것은

컴포넌트는 항상 대문자로 시작한다. JSX 는 하나의 태그만 만들 수 있다. div 말고 그냥 <> 빈 태그로 감싸도 된다. 똑같은 컴포넌트를 여러번 사용할 수 있다. 한 번 만들어 놓은 컴포넌트는 어디에든 몇번이든 재사용이 가능하다.

리액트 설치시, 별도의 다른 패키지 설치 없이 CSS 를 작성을 바로할 수 있는 방법 3가지가 있다.

리액트에서 이벤트를 어떻게 처리하는 방법은 2가지다. 첫번째 방법은 미리 함수를 하나 만들어놓고 전달해주는 것이다. 두번째 방법은 onClick={내부} , 내부에 직접 함수를 작성하는 것이다.

state 는 컴포넌트가 가지고 있는 속성값이다 useState 는 상태값 관리를 위해 사용한다.

props 는 properties 의 약자로, 속성값을 의미한다.

dummy 데이터를 불러와 map 반복문을 이용하면 반복되는 요소의 고유한 값을 넣어줄 수 있다.

라우팅 구현을 위해 react-router-dom 을 설치한다.

REST API 는 URL 주소와 메소드로 CRUD(Create Read Update Delete) 요청을 한다.

useEffect 의 두번째 매개변수로 배열을 전달한다. 전달된 배열은 의존성 배열이라고 부른다. 의존성 배열의 값이 변경되는 경우에만 함수가 실행된다. useEffect 부분에서 API 호출을 해보자. API 통신을 하기 위해 fetch() 를 이용해보자.

자신만의 커스텀 훅스를 만들 수 있다.커스텀 훅스를 만들 때, 파일명이 use… 로 시작하면 된다. 비슷한 작업들을 하나의 커스텀 훅으로 만들어서, 여기저기서 쓸 수 있다. 반복해서 작업할 필요도 없어지고, 코드도 훨씬 간결해진다.

업데이트는 PUT 메소드를 사용한다. Day 1 을 들어갔을 때, 체크박스 부분을 선택하면 아는 부분이라고 유지해주는 것이 좋아 보인다.삭제 버튼을 실수로 눌렀을 수도 있으니, confirm 창을 띄워 물어본다.

주소를 입력하고 POST 를 날리면, 새로운 단어가 생성된다. useHistory 로 생성한 history 에 주소를 push 해주면, 해당 페이지로 이동한다. <Link to> 처럼 <a> 태그를 사용하지 않고 페이지를 전환할 때 유용하게 사용할 수 있다.

느린 3G 에서 작업 중일 때, Loading 중임을 표시해보자.

create-react-app 으로 만든 리액트 프로젝트를 타입스크립트로 바꿔보았다.처음부터 타입스크립트를 도입하는 게 가장 좋고, 프로젝트 도중에 타입스크립트를 설치해 사용해도 되니까 너무 부담갖지 않아도 된다.

매번 프로젝트를 만들 때 마다 직접 요청 상태 관리를 위한 커스텀 Hook 을 만들기 귀찮다면, 이 라이브러리를 사용하면 된다.