8. React (Form)

내가 생각하는 핵심 키워드

: Map Function

 

 

사용자로부터 입력을 받아 데이터를 처리할 수 있는 Form

선행 : State, Event (Javascript)

---

[State]

- Component 내에서 유동적으로 변할 수 있는 값을 의미

  (원래는 Class component에서만 가능했지만, 현재는 Function component를 많이 사용)

 

- 개발자가 의도한 동작에 따라서 또는 사용자의 입력에 따라 값이 변경될 수 있다

  (단, State의 값을 변경하는 것이 아닌 setState 함수를 return해서 변경해야 한다)

 

- State 값이 변경되면 React가 자동으로 변경된 부분을 계산 후 재렌더링 한다

 

[State의 변경 방법]

State의 변경 방법에는 두 가지가 있었다

현재 값을 기반으로 State를 변경하는 경우 함수를 넣는 방법을 권장한다

 

1. setState 내에 변경할 값을 직접 할당하는 방법

 

2. setState에 함수를 넣어서 return 값으로 State를 변경하는 방법

 

State 참고 : https://wildcard.tistory.com/entry/4-React-State?category=966312

---

[Event]

사용자가 웹 브라우저의 HTML 요소에 접근하거나 사용하여 발생한 사건을 의미

(사용자가 아닌, 개발자의 의도에 따른 로직에 의해 발생될 수도 있다)

 

다양한 로직을 처리하고 사용자에게 그 결과를 출력해준다

 

[Event handling 방법]

State와 마찬가지로 Event handling 또한 두 가지 방법이 있다

1. 핸들링 함수 선언

2. 익명 함수로 처리

 

Event 참고 : https://wildcard.tistory.com/entry/5-React-Event?category=966312

---

Form 개발

<InsertForm onInsert={(value) => {
  console.log(value);
}} />

InsertForm 컴포넌트를 생성(호출), onInsert를 Props로 전달해준다

이때, onInsert에 값은 InsertForm.js에서 사용자로부터 입력받는 <input>의 value 값이 된다

 

위 동작 과정의 흐름은 아래 사진을 참고

해당 과정을 통해 Form은 사용자로부터 입력받은 데이터를 처리하게 된다

 

입력된 데이터는 onInsert의 매개 변수(value)로 전달되어 console.log로 출력,

<input>에서 사용자가 입력한 데이터는 setInputValue("");를 통해 초기화가 된다

---

Form 개발(리스트)

Form으로부터 사용자의 입력 값을 전달받아 리스트에 저장 후 순차적으로 화면에 출력하는 과정

 

[Array 메서드(map)]

배열의 요소를 이용해 순차적으로 함수를 싱행, 새로운 배열을 반환하는 메서드

실행할 콜백 함수는 current value, index, map을 호출한 배열을 매개변수로 전달받는다

반드시 함수내에서 새로운 값을 리턴해주어야 한다

 

map 사용 전

map 사용 후

 

 

[Array Form 사용 예시]

Form으로부터 전달받은 값을 실제 할일 목록에 추가하고 할일 목록을 화면에 출력

1. From ─ (데이터 전달) → App( )

   todoList array에 Push

2. todoList ─ (props) → ListVew component(출력)

 

if(typeof onInsert === "function" && inputValue) { 
    onInsert(inputValue);
}

사용자로부터 받는 입력값을 handleSubmit 함수를 통해 onInsert에 할당

 

handleSubmit은 Callback함수로 deps의 값이 변경되었을 때만 함수가 실행된다

const handleSubmit = useCallback((event) => { }, [onInsert, inputValue])

onInsert, inputValue 두 값 중 어느 한 값이라도 변경되면 Callback함수가 실행

(여기서는 두 개의 deps 모두 변경이 일어났기 때문에 실행이 된다)

 

<InsertForm onInsert={handleInsert} />

InsertFrom으로부터 반환받으며, handleInsert 함수를 실행

 

const handleInsert = (value) => { }

value에는 사용자로부터 입력받은 값이 담긴 State, InputValue가 담겨있다

 

setTodoList((current) => {
    const newTodoList = [...current]; }

자식 컴포넌트의 State값을 setTodoList의 매개 변수로 사용, 전개 구문을 사용해서 복사한다

(자식 컴포넌트의 State값 = InputValue)

 

* 여기서 사용자의 입력 값에 대한 그림이 그려지지 않는다면 아래를 참고

<li> 태그를 사용해서 값을 하나씩 입력받는다면 아래와 같이 배열안에 담기게 된다
[
     "안녕하세요",
     "리액트 폼 어려워요 ..",
     "바이~",
…
]

 

newTodoList.push({
    key: new Date().getTime(), 
    value: value,
    isCompleted: false 
});

key : 이후 추가

new Data() = 인수 없이 호출하면 현재 날짜와 시간이 저장된 Date 객체 반환

getTime() = 이후 추가

 

value : inputValue (Form)

 

isCompleted : todoList를 사용시 완료처리를 위한 flag 값으로 사용할 요소

 

return newTodoList;

값을 리턴, todoList의 값으로 할당

 

<ListView todoList={todoList}/>

ListView Component 생성, todoList에 State(todoList)값을 할당하여 Props로 전달

여기서 앞쪽에 값을 할당받는 todoList는 ListView에 넘겨줄 매개 변수의 이름

 

{todoList.map((item) => { })}

map 함수는 앞에 붙는 배열, 객체의 요소마다 map 함수안에 정의된 기능을 수행,

결과값으로 새로운 배열, 객체를 만들어내는 함수다

 

위 코드의 경우 todoList( const [ todoList, setTodoList ] = useState([ ]); )는 배열로

배열안에 값을 가져올 때, <li>태그의 특징을 이용하여 각 데이터를 구분하게 된다

<li>태그로 자동생성되는 숫자를 key값, 실제 배열안 데이터를 value값으로 출력하게 된다

 

<li key={item.key}>

key 값은 React가 어떤 부분이 변경되었는데 구분하기 위해 값을 할당해주면 좋다

(key값 없이 실행시 WANING 문구가 출력, 넣어주는 것이 좋다)

 

<span>{item.value}</span>

여태까지 전달, 전달 … 되어온 사용자의 입력값 출력