리액트의 기본 요소: 이벤트 핸들링, 조건부 렌더링, 리스트와 키

이전 글

리액트의 기본 요소; 컴포넌트와 Props, State와 생명주기, 훅

 

교재: 소플의 처음 만난 리액트

 

키워드

이벤트 헨들링 조건부 렌더링 리스트와 키

Ch08. 이벤트 핸들링

이벤트 처리하기

이벤트: 사용자가 버튼을 클릭하는 등의 사건 

 

DOM의 이벤트

-이벤트의 이름을 모두 소문자로 표기

-이벤트를 처리할 함수를 문자열로 전달 

 

리액트의 이벤트

-리액트는 이벤트의 이름을 *카멜 표기법으로 표기  *ex. onClick 

-이벤트 처리할 함수를 그대로 전달

 

이벤트 핸들러(이벤트 리스너): 이벤트를 처리하는 함수

 

• 클래스 컴포넌트

-클래스의 함수로 정의하고 생성자에서 바인딩해서 사용

-클래스 필드 문법도 사용 가능

 

• 함수 컴포넌트

-함수 안에 함수로 정의하거나 arrow function을 사용해서 정의

 

예제 코드

클래스 컴포넌트 'Toggle'

컴포넌트의 state에는 isToggleOn이라는 Boolean 변수가 있다

버튼을 클릭하면 이벤트 핸들러 함수인 handleClick() 함수를 호출하도록 되어 있다.

handleClick() 함수를 정의하는 부분과 this.handleClick = this.handleClick.bind(this); 부분을 눈여겨 본다

• handleClick() 함수의 정의 부분

괄호와 중괄호를 사용해서 클래스의 함수로 정의한다.

이렇게 정의된 함수를 constructor()에서 bind()를 이용하여 this.handleClick에 대입한다

→ 클래스 컴포넌트에서 정의한 함수 내에서 this 사용하기 위함

 

JSX에서 this의 의미에 대해 유의해야 한다.

bind 하는 이유는 자바스크립트에서는 '기본적으로 클래스 함수들이 바운드되지 않기 때문이다. bind 하지 않으면 함수가 실제로 호출될 때 함수 내에서 this는 undefined가 되기 때문이다.'

따라서 bind를 해줘야 함수의 이름 뒤에 ()괄호 없이 사용할 수 있다.

 

아래는 bind 사용 안 하는 방법이다.

 

클래스 필드 문법

 

이벤트 핸들러를 넣는 곳에 arrow function을 사용하는 방법

 

< 정리 >

함수 컴포넌트 내부에서 이벤트 핸들러를 정의하는 2가지 방법

→ 함수 안에 또 다른 함수로 정의하는 방법 & arrow function을 사용하여 정의하는 방법

 

Arguments 전달하기

Arguments(파라미터 or 매개변수): 함수에 전달할 데이터

 

• 클래스 컴포넌트

-arrow function을 사용하거나 Function.prototype.bind를 사용해서 전달

 

• 함수 컴포넌트

-이벤트 핸들러 호출 시 원하는 순서대로 매개변수를 넣어서 사용 

 

arrow function을 사용한 방법 → 명시적으로 event를 두 번째 매개변수로 넣어 준다

Function.prototype.bind → event가 자동으로 id 이후의 두 번째 매개변수로 전달된다 

 

실습: 클릭 이벤트 처리하기(261p) 

 

Ch06. 조건부 렌더링

조건부 렌더링

조건에 따라 렌더링의 결과가 달라지도록 하는 것 

ex. 조건문의 값이 true이면 버튼을 보여 주고 false이면 버튼을 가리는 것 

 

*자바스크립트의 Truthy와 Falsy

truthy: true는 아니지만 true로 여겨지는 값

Falsy: false는 아니지만 true로 여겨지는 값

truthy	falsy
true	false
{ } (empty object)	0, -0 (zero minus zero)
[ ] (empty array)	0n (BigInt zero)
42 (number, not zero)	' '. " " (empty string)
"0", "false" (string, not empty)	null
	undefined
	NaN (not a number)

 

엘리먼트 변수

리액트 엘리먼트를 변수처럼 저장해서 사용하는 방법 

 

인라인 조건

조건문을 코드 안에 집어넣는 것 

 

인라인 If

if문을 필요한 곳에 직접 집어 넣어서 사용하는 방법 

&&연산자를 JSX 코드 안에 중괄호를 사용하여 직접 넣어서 쓰는 방법 

 

실제로 if문을 넣는 것이 아니라, if문과 동일한 효과를 내기 위해 &&라는 논리 연산자를 사용한다

&& 연산자 → AND 연산 → 단축 평가

 

앞에 나오는 조건문이 true일 경우에만 뒤에 나오는 엘리먼트를 렌더링 

 

인라인 If-Else

If-Else문을 필요한 곳에 직접 넣어서 사용하는 방법

 

조건문의 값에 따라 다른 엘리먼트를 보여줄 때 사용

 

? 연산자 → 삼항 연산자

조건문 ? 참일 경우 : 거짓일 경우

 

앞에 나오는 조건문이 ture면 첫 번째 항목을 리턴, false면 두 번째 항목을 리턴 

 

컴포넌트 렌더링 막기

 

특정 컴포넌트를 렌더링 하고 싶지 않을 경우 null을 리턴한다 

 

 

실습: 로그인 여부 나타내는 툴바 만들기 (285p)

 

 

Ch10. 리스트와 키

리스트와 키

배열

-리스트를 위해 사용하는 자료 구조

-자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 

const numbers = [1, 2, 3, 4, 5];

 

키: 각 개체나 아이템을 구분할 수 있는 고유한 값

 

여러 개의 컴포넌트 렌더링하기

map() 함수

배열에 들어 있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것 

const doubled = numbers.map((number) => number * 2);

→ map() 함수를 사용하여 numbers 배열에 들어 있는 각 숫자에 2를 곱한 값이 들어간 doubled라는 배열을 생성하는 코드 

 

→ numbers라는 배열에 들어 있는 각 숫자를 <li> 태그로 감싸 리턴한다. 리턴된 listItems 배열은 총 5개의 엘리먼트를 갖는다 

 

→ <li> 태그가 들어 있는 listItems 배열을 <ul> 태그로 감싸서 렌더링하게 된다 

 

→ 최종 렌더링되는 코드

 

→ 출력 화면 

 

기본적인 리스트 컴포넌트

NumberList 컴포넌트

props로 숫자가 들어 있는 배열인 numbers를 받아서 이를 목록으로 출력 

 

리스트 아이템에는 무조건 키가 있어야 한다

 

리스트의 키에 대해 알아보기

키: 리스트에서 아이템을 구분하기 위한 고유한 문자열

 

리액트에서의 키의 값은 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 된다.

 

키값으로 숫자의 값을 사용

 

 

키값으로 id를 사용

 

리액트에서는 키를 명시적으로 넣지 않으면 기본적이 이 인덱스 값을 키값으로 사용한다 

 

실습: 출석부 출력하기  (305p)

 

다음 글

리액트의 기본 요소: 폼, State, 합성과 상속, 컨텍스트