[React] Udemy 강의 노트 4-1

 

 

모듈 소개

- 리액트의 중요한 기본 개념 - 컴포넌트, props

- 사용자와 상호작용에 대해 공부

- 사용자 이벤트 다루기

- state

- 리액트는 선언적인 접근 방식을 사용. 

- 원하는 목표 상태를 정의하고 리액트가 그 상태에 도달하도록 처리

 

 

이벤트 리스닝 및 이벤트 핸들러 수행하기

- 이벤트가 상태의 변화를 촉발

- 클릭했을 때 리액트가 반응하도록 하는 것은 내장된 HTML 요소에서 수신할 수 있는 모든 DOM 이벤트에 접근할 수 있다.

- JSX요소에서 props를 추가해서 이벤트 리스너를 적용한다. ex) onClick과 같이 on으로 시작

- 이런 on props는 함수가 필요하고 on props로 함수를 실행한다.

- 함수를 전달할때는 return 전에 함수를 선언하고 ()를 빼고 실행한다.(()를 입력하면 JSX코드를 평가할 때 마다 실행되기 때문이다.)

- onClick이벤트는 대부분의 DOM 요소에서 사용 가능하다. 이벤트 지원은 요소마다 다를 수 있다.

- on 다음 이벤트명은 대문자로 시작한다.

 

컴포넌트 기능이 실행되는 방법

- 리액트가 어떻게 JSX코드를 불러오는지 알아보기

- 컴포넌트는 함수형이다. 

- 누군가는 그 함수를 호출해야한다.

- JSX코드로 실행되게 된다.

- 리액트는 JSX내 함수들을 계속해서 호출한다. 더 이상 함수가 남아있지 않을 때 까지

- <App/>이 가장 먼저 호출되는 함수다.

- 리액트가 모든 컴포넌트를 지나 모든 컴포넌트 함수를 실행해서 화면에 무언가를 그리게 된다.

- 하지만 리액트는 이 과정을 반복하지 않는다.

- 그래서 리액트에게 어떤 데이터가 변화했는지 알려주어야 하고 이것이 state의 개념이다.

 

 

"State"와 함께 일하기

- 일반적인 변수는 변경되었다고 해서 재평가해서 DOM을 변경하지 않는다.

- 리액트에게 재실행을 명령하려면 import 할 게 있다. useState다. 

- 이것은 리액트 훅 hook이고 가장 중요한 훅 중에 하나로 모든 훅은 컴포넌트(함수) 안에서 호출해야 한다. 

- useState로 특별한 변수를 생성한다. 변수는 변경사항으로 인해 컴포넌트 함수를 다시 호출하게 한다.

- useState에 초기값을 전달할 수 있다. (useState(초기값));

- 그 변수에 새로운 값을 할당하기 위해 우리가 호출할 수 있는 함수도 반환한다.

- 여기서 구조 분해 할당을 이용할 수 있고 기본 값은 이렇게 쓰인다. 

- const [변수, 함수] = useState(초기값);

- useState는 항상 두 개의 요소가 있는 배열을 반환한다.

- 첫 번째 요소는 현재 상태값이고, 두 번째 요소는 그것을 변경하는 함수이다.

- title = 'a' 처럼 새로운 값을 할당하는 게 아니고 변경 함수를 사용한다.

- setTitle('a');

- state를 변경하는 함수를 호출해서 state에 새로운 값을 할당하고 싶다고 리액트에게 말하고, state를 변경하는 함수는 useState로 state가 등록된 컴포넌트는 재평가 되어야 한다고 리액트에게 말해준다.

- 이후 리액트는 컴포넌트를 다시 실행하고 JSX를 다시 평가해 달라진 데이터를 화면에 표시한다.

- setTitle를 호출했을 때는 사실상 바로 값을 바꾸는 것은 아니다.

- 대신 이 State의 업데이트를 예약한다.

- 그래서 바로 title을 콘솔로 찍으면 아직 변화되지 않은 초기값이 나오게 된다.

- 결국 컴포넌트가 다시 호출될 때 데이터가 변한다.

- state를 사용하면 값을 설정하고 변경할 수 있다.

 

 

"UseState" 훅 자세히 살펴보기

- state는 리액트의 키 컨셉이다.

- 특정 컴포넌트의 인스턴스를 위해 state를 등록한다.

- 컴포넌트별 인스턴스를 기반으로 해서 독립적인 state를 갖는다.

- 그리고 = 를 사용해서 변수에 값을 변경하는 것이 아니기 때문에 const를 사용해도 된다.

- useState를 이용해서 상태를 등록하면 항상 두 개의 값을 얻는데, 현재 상태값과 업데이트 하는 함수다. 그리고 state가 변할 때 마다 업데이트 하는 함수를 호출한다.

- 리액트 앱에 반응성을 추가하는 것이 state다.