리액트

[React] 리액트 Create

훈츠 2020. 6. 12. 10:00
반응형

훈츠의 블로그 입니다. 

 

안녕하세요. 훈츠입니다. 요즘 Web 프로젝트를 경험해보고 싶어서 새롭게 공부하고 있는 리액트에 대한 정리 글입니다. 저 역시 리액트를 잘모르는 관계로 정리 형태로 글을 남겨 봅니다.

심도 있게 리액트를 학습해보시길 원하시면 생활코딩 혹은 다른 글을 참조하세요.


글 목록

  • CRUD 란?
  • Create 구현 및 설명 
  • 리액트 에서 Form 태그 사용법
  • 배열에서 push 와 concat 의 차이 
  • shouldComponentUpdate 함수로 랜더링 결정하기
  • 배열에서 concat 대신 사용하는 Array.From 함수
  • 객체에서 concat 처럼 내용을 복사하는 Object.assign 함수 
  • JavaScript 의 코드의 변칙성을 일관 시켜주는 immutable.js 

CRUD 란?

Create : 생성 

Read : 조회 

Update : 변경 

Delete : 삭제 

 

웹이든 앱이든 혹은 백엔드 서버, 데이터 베이스에서 가장 중요한 부분입니다. 

제가 다루고 있는 리액트에서 'C' 에 해당하는 Create 에 대한 글입니다. 


Create 구현 및 설명

자 이제 리액트에서 Create 를 어떻게 하는지 설명 해보겠습니다. 리액트 기술은 유사 HTML, 유사 JavaScript 기술을 이용 하긴 하나 결국 최종 목적지는 WEB 에서 돌아가는 HTML, CSS, JavaScript 코드로 변환되어서 돌아가기 때문에 원리는 HTML 에서 생성 하는 부분과 비슷 합니다. 화면을 이동하는 <a href="/"><a/> 링크 태그와, 생성을 위해서 사용되어지는 <form > 태그를 이용하는 부분도 말입니다. 

 

 하지만 리액트는 하나의 페이지 위에서 돌아가기 때문에 <form>태그에서 화면을 전환시키는 방법이 아닌 리액트만의 <form> 태그 사용법이 있습니다. 

 

동작 설명 

 1. create 링크를 누르면 create 페이지로 이동합니다. 

 2. create 페이지에서 생성할 제목과 설명글을 입력하고, 만들기 버튼을 누릅니다. 

 3. 입력한 내용이 리스트 태그로 만들어지고, 리스트 태그를 누르면 추가한 페이지의 내용으로 변경됩니다. 

 

이해를 돕기 위한 표입니다. 


리액트에서 form 태그 적용법 

form 태그 적용법 자체는 Node.js 혹은 js Express 에서 적용법과 다르지 않은데, 리액트 만의 특성도 있으니 비교해 보시면 좋을것 같습니다. 

 

<form> 태그 적용법 

1
2
3
4
5
6
7
8
9
10
11
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
 
<form action="/create" method="post" 
    onSubmit = {function(e){
        e.preventDefault();
        this.props.onSubmit(
            e.target.title.value,
            e.target.dsc.value                    
);}.bind(this)}>
 
 
cs

form 태그 설명 

 1. action ="/create" // 이동 시키 고자하는 하는 주소

 2. method ="post"  // form 으로 생성할때는 반드시 "post" 이용 

 3. onSubmit = {function(2) {...  //익명함수 만들고 그안에서 onSubmit 함수 호출후, e.target.변수.value 값을 전달

 4. bind(this) = 현 콤포넌트의 주소값 전달. 

 


배열에서 push 와 concat 의 차이

리액트의 만의 특성은 아니고, 자바스크립트에서 push와 concat 의 차이에 대해 설명 합니다. 

 

push 는 a 라는 데이터 배열 자체에 값을 추가 합니다. 

concat 은 a 라는 데이터 배열을 복사해서 값을 추가 하기 때문에 원본 자체는 값에 차이가 없고 위와 같이 복사해서 사용한 b 의 값만 추가 합니다. 

 

다음과 같은 차이를 숙지 하면 됩니다. 

 


shouldComponentUpdate 함수로 랜더링 결정하기

리액트에서는 App 에서 props 혹은 state 가 변경되면 연관되어 있는 모든 하위 콤포넌트들의 랜더링을 하게 되어있습니다. 이때 연관 있는 콤포넌트의 랜더링은 당연히 일어나야 겠지만, 연관이 없는 곳에서도 매번 랜더링을 하게되면 시스템 최적화에 문제가 발생 합니다. 이때 리액트에서는 랜더링을 할지 말지 결정 할수 있는, shouldComponentUpdate 라는 함수를 제공 해줍니다. 어떻게 사용하는지 설명 드리겠습니다. 

 

1
2
3
4
5
6
7
8
9
10
11
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
 
class CreateContent extends Component {
  shouldComponentUpdate(nextProps, nextState){
    if(nextProps.title !== this.props.title)
    return true//nextProps.title 과 현재 props.title 의 다르면 랜더링 하기 
    else
    return false//nextProps.title 과 현재 props.title 의 같으면 랜더링 안하기
  }
    render(){
 
cs

  shouldComponentUpdate 사용법 

1. shouldComponentUpdate(nextProps, nextState) { } 함수를 render() 함수 이전에 삽입 합니다. 

2. nextProps.변수명 -> 다음에 들어올 props 중 비교 하고 싶은 변수명 기입 

3. props.변수명 -> 이전 props 중 비교 하고 싶은 변수명 기입 ( 비교 변수명은 당연히 둘이 동일 해야 합니다. )

4. retrun true -> render 를 합니다. 

5. return false -> render 를 하지 않습니다. 

 


배열에서 concat 대신 사용하는 Array.From 함수

 

배열에서 concat 이 조금 헷갈리다면, Array.From 함수를 이용해 보십시요. 동작은 concat 과 마찬가지로 원본은 건들지 않고 주소 말고 값자체를 복사하기 때문에 Array.From함수를 이용하고 push 를 이용하면 됩니다. 

 

사용법 

 1. Array.from(복사할배열명) -> 복사할 배열명을 넣으면 리턴 값으로 복사한 배열을 받을수 있습니다. 

 2. 주소값이 다른 값만 복사한 배열이기 때문에 push 및 기타 다른 배열 처럼 사용 하면 됩니다. 

 


객체에서 concat 처럼 내용을 복사하는 Object.assign 함수 

ES6 에 나온 개념으로 const 와 let 이 있는데 저는 코틀린을 학습해본 경험이 있어 둘이 차이를 코틀린에서 불변의 val 을 const 로 변화가 가능한 var 를 let 으로 이해 하고 있습니다. 정확히 맞는지는 모르겠지만 아래 코드에서 확인해보시면 알수 있습니다. const 로 지정된 obj 에 다른 값을 쓰려고 하면 오류를 띄어 줍니다. 

 

const 와 별개로 아래 Object.assign 을 이용해서 복사한 o.a = 3 값을 주고 콘솔로 찍어보면 obj 와 값이 다른것을 확인 할수 있습니다. 

 

사용법

 1. Object.assign ( { } , 객체값 ) ; // ( { } , 이 부분은 넣어 줘야 합니다. 이유는 몰라요. ㅠㅠ 어쨋든 빼면 안됩니다. 

 


JavaScript 의 코드의 변칙성을 일관 시켜주는 immutable.js 

앞서 설명 드린 shouldComponentUpdate 함수로 랜더링과 push 대신 concat 을 이용하는 이유 모두가 코드의 최적화를 위해서 입니다. 그런데 리액트에서 부모 콤포넌트의 변화가 생기면 하위 콤포넌트 모두 리랜더링 되는 특성때문에 Steat 에 값을 불변함을 유지 하지 않으면 컴포넌트 최적화를 할수 없습니다. 이때 이 불변함을 유지 하면서 코드를 업데이트 하려고 할때, 코드의 구조가 복잡하고 깊다면, 번거롭게 실수의 가능성도 있습니다. 이러한 문제를 해결하기 위해 사용할수 있는 대체제 immutable.js 입니다. 

 

사용법 

 1. yarn add immutalbe 

 2. immutable 사용 할때 규칙 기억 하기 

   1. 객체는 Map 

   2. 배열은 List

   3. 설정 할때는 set

   4. 읽을땐 get 

   5. 읽은 다음 설정 할때 update 

   6. 내부에 있는걸 ~ 할땐 In 을 붙인다. : setIn , getIn, updateIn 

   7. 일반 자바스크립트 객체로 변환 할땐 toJS

   8. List 엔 배열 내장함수와 비슷한 함수들이 있다 – push, slice, filter, sort, concat… 전부 불변함을 유지함

   9. 특정 key 를 지울때 (혹은 List 에서 원소를 지울 때) delete 사용

 

사실 저도 아직 immutable.js 를 사용해 보지 않았습니다. 추후 학습하면 글을 정리해서 올리도록 하겠습니다.

감사합니다. 

 


코드 공유 

github.com/rain2002kr/CreateReactAppExamCode.git

 

rain2002kr/CreateReactAppExamCode

생활코딩 예제코드. Contribute to rain2002kr/CreateReactAppExamCode development by creating an account on GitHub.

github.com

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형