ReactJS 정리 (3) Data 다루기

※ 이 게시물은 React만 설명하는 것이 아니라 강좌를 듣고 공부한 내용을 기록하는 글이다

CRUD

대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능 4가지를 일컫는 말

CRUD : Create(생성), Read(읽기), Update(갱신), Delete(삭제)

 

React Lifecycle 

React 컴포넌트는 생명주기(Lifecycle)을 가진다

Lifecycle : 컴포넌트가 생성되고 사용되고 소멸될 때까지의 일련의 과정

LifeCycle Event : 생명주기 안에서 특정 시점에 자동으로 호출되는 메소드

 

form 태그 속성

• action : 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL 명시
• method : 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드 명시 -> GET/POST
• onSubmit : 폼 안의 submit 버튼을 클릭했을 때 해당 이벤트(정의된 method)가 실행

 

GET

GET 방식은 URL에 폼 데이터를 추가하여 서버로 전달하는 방식

GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장

GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전동되므로 길이 제한 있다

 

POST

POST 방식은 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식

POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로 브라우저 히스토리에도 안 남는다

 

길이나 개수를 나타내는 객체 별도 추가

state의 속성 값이 아니라 따로 객체로 추가하여 개수를 저장하는 공간을 만든다

this.max_content_id = 3;	// 이런식으로 따로 객체 추가
this.state = {		// state 안에 명시하지 않음
   ...
}

개수라는 것은 사용할 때만 호출하는 것이고, UI에 영향이 없으므로 불필요한 렌더링을 줄이기 위함이다

 

배열에 값 추가하기

React를 사용하면 state 속 배열의 값을 바꾸어야 할 때가 종종 있다

공부한 방법은 총 3가지로, 상황에 맞게 쓰면 된다

1. push : 원본을 바꿈

var arr = [1,2];
arr.push(3);

최종 arr의 값 : [1,2,3]

2. concat : 원본을 바꾸지 않음

var arr = [1,2];
var res = arr.concat(3);

최종 arr의 값 : [1,2]

최종 res의 값 : [1,2,3]

3. Array.from 후 push : 원본을 바꾸지 않음

var arr = [1,2];
var res = Array.from(arr);
res.push(3);

최종 arr의 값 : [1,2]

최종 res의 값 : [1,2,3]

 

shouldComponentUpdate()

shouldComponentUpdate란 생명주기 함수의 기능으로 렌더링 직전에 실행된다

모든 컴포넌트들은 shouldComponentUpdate라는 메소드를 가지고 있다

React는 기본적으로 애플리케이션을 구성하고 있는 컴포넌트에서 발생하는 모든 변경사항에 대해 재렌더링한다

또한 부모 컴포넌트의 state 값이 변경되면 자식 컴포넌트는 모두 렌더(render)가 호출되어 불필요한 재렌더링이 발생

이때, 렌더링 직전에 실행하는 shouldComponentUpdate에서 false를 반환하면 React가 재렌더링하지 않게된다

(단, shouldComponentUpdate는 실행됨)

shouldComponentUpdate를 잘못 설정하거나 잊어버리면 구성요소가 예상대로 업데이트 되지 않아 문제가 발생한다

shouldComponentUpdate에서 계산을 실행하는 것은 성능과 노력 면에서 비용이 많이 들기 때문에 간결하게 작성한다

 

shouldComponentUpdate 활용

기본형은 아래와 같이 매개변수로 newProps, newState값이 들어온다

shouldComponentUpdate(newProps, newState){
	...
}

위에서 말했듯이 return 값이 false면 렌더링은 하지 않고 true면 렌더링한다

newProps : props의 바뀐 값

newState : state의 바뀐 값

따라서 굳이 재렌더링을 할 필요가 없을 때, 아래와 같이 코드를 작성하면 된다

shouldComponentUpdate(newProps, newState){
	if(newProps.data === this.props.data){
    	return false;
   	}
    return true;
}

새로운 props의 값이 전에 받았던 props 값이 바뀌면 굳이 렌더링하지 않아도 되기 때문에 false를 리턴하도록 한다

 

※ 이때 부모 컴포넌트에서 state 속에 있는 contents 배열에 내용을 추가할 때 concat이 아니라 push를 쓴다면

변경된 값이 this.props.data에도 적용된 후 비교하기 때문에, 변경 이전의 값과 비교할 수 없음!!

따라서 원본을 바꾸는 방법인 push 방식보다 원본을 복제한 후,

복제본을 바꾼 결과를 사용하는 concat 방식을 이용하는 편이 좋다

 

props data

props data는 Read-Only이기 때문에 수정하려면 state화를 시켜야 한다

먼저 state화 시키기 위해서는 해당 컴포넌트 내에 constuctor를 생성한다

contructor(props){
	...
}

그리고 contructor 내부에 props를 통해 가져온 데이터 필드를 각각 넣어준다

 constructor(props){
    this.state = {
      id:this.props.data.id,
      title: this.props.data.title,
      desc: this.props.data.desc
    }
}

사용시에는 state에 저장된 값을 이용하여 props의 값을 사용하면 된다

	<input
		type="text"
		name="title"	// name을 state의 필드명과 같게 지정
		placeholder="title"
		value={this.state.title}	// state의 값을 value 값에 넣어줌(props로 하면 바로바로 변경 X)
		onChange={this.inputFormHandler}	// function(e){..}로 해도 되는데 그냥 따로 뺀 것임
	>
 	</input>

값을 변경하기 위해서는 setState를 이용해주면 된다

특히 이벤트가 발생한 타겟 name(=state의 필드명)에 입력된 값을 넣어주고 싶으면 아래와 같이 작성한다

inputFormHandler(e){
	 this.setState({[e.target.name]: e.target.value});
}.bind(this);

해당 코드는 이전의 input 태그에서 일어난 이벤트를 정의한 메소드이며

해당 메소드는 input 태그에 정의되어 있는 name과 value 값을 가져온다

이벤트 객체인 e의 target 부분에 가면 이벤트가 발생한 타겟 이름인 name과 입력된 값인 value를 가져올 수 있다

이후 부모 컴포넌트로 값을 전송하고 부모 컴포넌트의 state를 변경해야 해야 한다

이전에 말했듯이 부모에서 자식으로 데이터 전달은 props로, 자식에서 부모로 전달은 event로 한다

대표적으로 onSubmit을 이용한 방법이 있는데, 간단하게 아래의 예제로 확인하자

[부모 컴포넌트]

import Content from '자식 컴포넌트 주소';
<Content onSubmit={function(_id,_title,_desc){
		...
      }.bind(this)}></Content>

부모 컴포넌트에서 자식 컴포넌트를 import 한 후 위 코드처럼 사용할 것이다 

이때 onSubmit 속성에 매개변수를 가진 함수를 정의해 놓는다

[자식 컴포넌트]

<form action="/process" method="post" onSubmit={function (e) {
		e.preventDefault();
		this.props.onSubmit(		
		this.state.id,
		this.state.title,
		this.state.desc);
		}.bind(this)}
>

자식 컴포넌트는 props를 통해 부모의 onSubmit에 정의되어 있는 함수를 사용할 수 있다

따라서 자식의 form 태그 속 onSubmit 함수에 부모의 onSubmit 함수를 호출하게 되면,

부모의 onSubmit 함수는 호출될 때 자식 컴포넌트로부터 매개변수를 받게 되고 이후 받아온 매개변수로 state를 변경!

 

대괄호 [ ] 사용

React에서 대괄호는 값을 동적으로 사용하는 경우에 필요하다

아까 예제에서 보았듯이 아래의 코드는 타겟 name과 value는 이벤트가 발생할 때마다 가져온다

this.setState({[e.target.name]: e.target.value});

 

onChange 이벤트 함수

주로 input, textarea 등에서 발생하다

기존의 change 이벤트는 보통 focus out이 됐을 때 사용자의 입력이 완료되었다고 인식한 후 발생한다

하지만 React에서 change 이벤트는 텍스트가 입력되어 변경이 생길때마다 발생한다

(즉 한글자가 생기고 없어질 때마다 발생)

 

splice

배열의 일부분을 잘라내는 방식

contents.splice(index, num)은 contents라는 배열의 index부터 num개를 잘라낸다