React ■ 랜더링, 이벤트 핸들러

 

조건부 렌더링

조건부 렌더링이란?

특정 조건에 따라 표시해야 할 항목이 다를 경우, if문 또는 삼항 연산자를 사용하여 조건에 따라 JSX를 렌더링할 수 있습니다.

조건부 렌더링 사용 예시

• 부모 컴포넌트에서 전달된 name 값이 특정 조건을 만족할 때만 특정 데이터를 출력합니다.
• 예를 들어, name 값이 ‘nabi’일 때는 고양이 사진을, 그렇지 않으면 다른 메시지를 출력할 수 있습니다.
• 반환할 값이 없을 경우에는 return null을 사용하여 아무것도 렌더링하지 않도록 할 수 있습니다.

&& 연산자 활용하기

아래의 코드는 name이 nabi가 아닐때는 ‘고양이가 아닙니다’를 렌더링함

name이 nabi일 때만 필요한 DOM 요소를 렌더링

&&의 왼쪽에는 boolean이 나와야하기 때문에, 숫자를 사용할 수 없음

count === 0 또는 count > 0 와 같이 변경하여 boolean이 나올 수 있도록 수정이 필요함

위에서 변수를 선언하고 count가 0일때만 변수에 JSX를 할당하는 방식

 

 

리스트 렌더링

리스트 렌더링이란?

데이터를 여러 개의 컴포넌트 또는 태그로 렌더링을 할 수 있으며 이러한 데이터를 렌더링할 때 자바스크립트의 map()과 filter()를 사용

1. map() : 배열을 컴포넌트로 렌더링하기 위해 사용

2. filter() : 배열을 특정 조건에 따라 필터링한 후 컴포넌트로 렌더링하기 위해 사용

map() 함수란?

배열을 순회하여 새로운 배열을 반환하는 함수입니다. 기존 배열을 변경하지 않고, 새로운 배열을 반환하므로 안전하게 사용할 수 있습니다.

filter() 함수란?

배열을 특정 조건에 따라 필터링한 후 새로운 배열로 반환하는 함수입니다. 조건에 맞는 요소들만 반환하며, 조건을 만족하지 않는 요소는 제외됩니다.

map() vs filter() 차이점

앞에서 작성한 코드들은 서로 map과 filter를 뒤바꿔도 에러가 발생하지 않지만 동작되는 방식이 다르기 때문에 결과값도 다름

• map() : 배열을 순회 후 배열을 다시 반환하기 때문에 return number === 3을 작성하더라도 각각의 요소에 대한 true/false로 구성된 배열 반환
• filter() : 배열을 순회 후 특정 조건에 만족하는 요소만 반환하기 때문에 3인 요소만 반환되고 조건에 해당되지 않는 요소들은 반환하지 않음

 

 

 

unique "key" prop 에러 해결하기

 

• unique “key” prop 에러 해결하기 - 1

현재 localhost에서 페이지를 열면 개발자 도구 콘솔에 아래와 같은 에러 발생 꺼낸 데이터에 대한 고유한 키를 사용해주어야 에러를 발생시키지 않음

 

• unique “key” prop 에러 해결하기(App.jsx) – 2

key로 사용할 속성 설정

 

• unique “key” prop 에러 해결하기(child.jsx) – 3

key로 사용할 속성 설정 후 콘솔쪽에 에러가 사라진 내용 확인

 

• key를 사용할 때 주의할 점

키는 항상 고유해야 하며, 값이 변경되어서는 안됌

* 키를 사용해야 하는 이유는 데이터가 변경되더라도 해당 컴포넌트를 추적하여 사용할 수 있도록 해주기 위한 장치

 

이벤트 핸들러

이벤트 핸들러란?

JSX에서 특정 이벤트가 발생했을 때 동작하도록 하는 함수를 이벤트 핸들러라고 합니다. 이벤트 핸들러는 적절한 JSX 태그에 prop 형태로 전달하여 사용됩니다.

 

테스트를 위한 버튼 생성하기

테스트를 위한 버튼을 pages/EventTest.jsx에 작성하고, 라우터 설정하여 확인

클릭 이벤트 핸들러 작성하기

• 클릭 이벤트 핸들러 작성하기 - 1

클릭 함수를 작성하고 prop으로 전달하여 사용 가능

* 이벤트 핸들러를 작성할 땐 관례적으로 handle로 시작하여 그 뒤에 이벤트명을 붙임

• 주의할 점

이벤트 핸들러로 전달되는 함수들은 호출이 아닌, 전달이 되어야 함

올바른 예시 : React는 함수를 기억하여 클릭 이벤트가 발생할 때 함수를 호출함

잘못된 예시 : 함수명 끝의 ()가 렌더링 과정 중 클릭 이벤트가 발생하지 않음에도 함수를 호출하여 실행하도록 함

 

• 클릭 이벤트 핸들러 작성하기 - 2

아래와 같이 인라인 방식으로도 사용 가능

 

 

랜더링과 이벤트 핸들러에 대해 공부하고 정리를 진행했다 요즘 날씨가 더운거같다 별로안남았으니 다들 화이팅!!

그럼 20000!!!