패스트캠퍼스 챌린지 11일차 - 리액트 List 와 Form 다루기

 

List

 

자바스크립트와 동일하게 리액트에서도 배열이나 리스트를 이용하여 반복적으로 내용이 다른 컴포넌트를 생성할 때 Array.protoType.map() 을 사용한다.

 

Array.protoType.map() 알고가기 ▼

[사용 형식]

var new_array=arr.map(function callback(currentValue[, index[, array]]{

 // new_array 의 새 요소 반환

}[,thisArg])

 

배열 내의 모든 요소 각각에 대하여 제공된 함수(callback)를 호출하고, 그 결과를 모아서 새로운 배열을 반환한다.

 

.map()을 사용하지 않는 경우

       1. you're not using the array it returns; and/or  (리턴되는 배열을 사용하지 않을 경우)

       2. you're not returning a value from the callback. (콜백함수가 리턴값이 없을때)

See the Pen Correct Key Example by Dan Abramov (@gaearon) on CodePen.

리스트와 Key

 

Key는 형제요소들끼리 고유성을 갖기 때문에 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는데 도움을 주기때문에

엘리먼트 리스트를 반환하는 컴포넌트를 실행할 때 각 엘리먼트에 Key 속성을 부여하지 않으면 경고가 발생된다.

Key는 컴포넌트에 부여하는 것이 아니라 컴포넌트 내부 리스트(배열)에 속성으로 부여해야하고, (키값은 문자열로 주는것이 좋다고 한다.)

각기 다른 컴포넌트 내에 동일한 키값을 주었을 경우에도 문제없이 식별할 수 있다.

(이로 인해 리액트는 리턴되는 요소값을 체크 할때 컴포넌트 별로 체크한다는 것을 간접적으로 알수 있었다.)

또한 키는 식별에 도움을 주기 위해 사용하지만 컴포넌트로 전달하지 않아서 props로 호출할 수 없다.

---

 

Form

 

폼은 다른 리액트 DOM 엘리먼트와 다르게 동작한다 (기본 동작값이 있다. submit 이라던가 ...)

제출되는 formData를 관리하기 위해 리액트에서는 두가지 방법을 제시했다.

 

See the Pen Controlled Text Example by Dan Abramov (@gaearon) on CodePen.

 

1) Controller Component

 

[state, setState] 로 컴포넌트 내부에 상태를 form 내부의 요소의 value 속성에 주입하여,

컴포넌트에서 값을 컨트롤 할수 있게 한다. (변경은 onChange 이벤트를 이용하여 setState 로 상태값을 변경)

>> input type="file" 의 경우 읽기 전용이기 때문에 컨트롤이 불가하다.

>> value 속성을 prop으로 지정하면 사용자가 별도로 이벤트를 지정하지 않는 한 value가 변경되지 않는데,

     value 값을 undefined나 null로 설정하면 입력이 가능하다.

 

2) Uncontroller Component

 

비제어 컴포넌트는 DOM 자체에서 폼 데이터를 다룬다.

이는 컨트롤 컴포넌트에서 state와 이벤트 핸들러를 통해 데이터를 핸들링 했던 것을,

ref를 사용하여 DOM에서 폼 값을 가져올 수 있다.

>> 비제어 컴포넌트는 value를 prop으로 사용하지 않기 때문에 기본값을 주려면 defaultValue를 지정해서 사용한다.

 

 

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

공감