9. React (Form 2)

Form 태그에 완료, 삭제 추가하기

해당 내용은 앞전 포스트와 이어지는 내용
전 내용 : https://wildcard.tistory.com/entry/8-React-Form

 

[Array Form 예시 - 완료, 삭제 기능 추가]

Line 38, ListView Component에 onComplete, onRemove Props를 추가

 

ListView에서 완료버튼을 Click했을 때 위 함수가 실행

newList[index].isCompleted = true;

전달받은 index 매개 변수의 isCompleted 값을 true로 변환

isCompleted는 버튼의 flag값으로 사용할 key값이라고 전 포스팅에서 다루었다

 

ListVew에서 삭제버튼을 Click했을 때 위 함수가 실행

 

newList.splice(index, 1);

splice( ) : (선택할 값, 삭제할 개수)

해당 index에 맞는 값 1개를 삭제한다는 의미

index에 맞는 값을 삭제하므로 출력화면에서 사용자로부터 요청을 받으면 값을 삭제 후 재렌더링한다

 

각 버튼은 클릭 시 해당 App( )로 넘어간 후 함수에 정의된 동작 수행 후 출력된다

 

 

아래와 같은 결과를 확인할 수 있는데, 삭제버튼은 눌리는데 완료는 반응이 없다

(이유를 생각해보고, 계속해서 다음 글을 확인해보자)

---

React에 CSS 적용하기

React.js에서 css 요소를 적용하기 위해서는 아래와 같이 import 해주면 된다

import "./App.css";

 

HTML에서는 String으로 css를 표현해줄 수 있지만, JSX에서는 Object로 표현해야 한다

(
  <div className="react_style" style={{ padding: 18, color: "red"}}>
  {name}님, 반갑습니다
  </div>
)

- Inline style의 Property name은 camelCase로 적는다

예) padding-bottom: paddingBottom

 

- 스타일 입력시 사용하는 중괄호 중 바깥쪽은 JS를 사용하겠다는 의미하고,

  안 쪽은 오브젝트를 사용하기 위한 것을 의미

 

참고 : React CSS (w3schools.com)

 

 

[Array Form 예시 - 완료 처리 출력]

완료기능은 그 자체로 코드만으로는 사용자에게 재렌더링으로 보여줄 기능이 없었다

때문에 css를 통해 디자인적인 요소를 추가함으로 아래와 같이 결과를 확인할 수 있다