(React) 2 - 생활코딩(React) 2

■ create 구현하기

---

 

 

delete 는 버튼 클릭 시 삭제되도록 할 때 링크 사용 시 문제 될 수 있다.

따라서 delete 는 페이지 개념이 아니라 버튼같은 operation(동작) 개념으로 사용하는게 낫다.

 

 

사용을 위해 Control.js 를 별도로 만들고 App.js import 한다. 

 

 

이벤트를 실행했을 때 실행되어야 하는 함수를 핸들러라고 부른다. 

 

 

 

 Control.js 에 onClick 함수를 넣어준다.

함수 안에서 onChangeMode() 함수를 실행시키고 인수로 'create' 값을 전달해준다. 

 

 

전달받은 값을 _mode 로 이름짓고 이를 setState 를 통해 mode 의 값을 변경해준다. 

 

 

create 클릭 시 모드가 create 로 변경된 것을 확인 가능하다. 

 

 

이제 각 create, update, delete 에 맞는 content 를 띄워줄 예정이다. 

_article 이라는 변수를 선언하고 사용할 것이다. 

 

 

기존에 읽는 컨탠트는 ReadContent 로 이름을 다 바꿔주고 welcome과 read 모드일 때 띄워준다. 

 

만약 mode 가 create 일 경우에는 _article을 CreateContent 태그가 뜨도록 설정한다. 

 

 

그러면 Create 모드일 때 Create 에 해당하는 게시글이 뜨게 된다. 

 

 

onSubmit={} 이벤트는 submit 버튼 클릭 시 form 태그 안에 있는 onSubmit 해당 부분이 실행된다. 

이는 HTML이 가지고 있는 고유한 성질이다. 

 

 

debugger 을 통해 체크해보면 e.target.title.value 의 값이 제목인 것을 확인 가능하다.

즉 name 으로 전달한 값이 전달되는 것이다. 

 

 

배열에 값을 추가하는 방법은 배열에 push 를 통해서 값 추가하기

이러면 원래 배열의 값이 변경된다. (원본의 변경)

 

concat(결합하다) 을 사용해서 값 추가하기

concat(3) 이렇게 하면 원래 배열에 값이 추가된다. 

단 원래 배열이 변하지는 않는다. (원본x)

 

 

state 값을 추가할때는 오리지널 값을 변경하는

즉, push 와 같은 방법을 사용하지 않아야 한다. 

 

concat 을 사용하여 배열에 값을 추가하고

그 값을 변수에 할당해서 사용하는 방법을 쓴다. 

 

 

shouldComponentUpdate 를 사용해서 return true 일 경우,

아래 render 함수가 돌지만 false 일 경우 돌지 않아 목록이 추가 생성되지 않는다. 

 

 

create 버튼 누르면 newProps.data 는 4개,

this.props.data 는 3개가 나온다. 

 

newProps.data  첫 번째 인자를 통해 바뀐 값 알 수 있고, (새롭게 바뀐 값)

this.props.data  두 번째 인자를 통해 현재의 값을 알 수 있다 (이전 값). 

 

 

 

TOC의 값이 변하면 render 함수 돌고, 그렇지 않았을 때는 안돌게 하자

 

 

새롭게 바뀐 값과 이전 값이 같다면 render 돌지 말고,

만약 그렇지 않을 경우에는 render 가 돌아 새로 생성해준다. 

 

 

원본을 바꾸지 않는다. = 불변성(immutable)
Array.from 은 새로운 배열을 만들지만 내용은 같지만 같은 배열이 아니다. 

 

 

Array.from 을 통해 배열을 만들고 동일하게 push를 통해 넣어서 사용하는 방법이 있다.

Array.from 을 통해 배열을 복사하는 방법이다. 

 

 

객체의 경우 복제된 객체를 만들고 싶으면 Object.assign 사용하면 된다. 

내용은 같지만 같은 객체가 아니다. 

 

push 는 원본을 바꾸고, concat 은 원본을 복제하고 그것을 바꾼다.

 

■ Update & Delete 기능 구현

---

 

 

update 를 위해서 기존의 create.js 복사해서 사용한다. 

 

 

render 함수를 보기 좋기 위해 각각 함수를 분리한다. 

article 항목 리턴하는 함수로 분리한다. 

 

 

우리가 나타내고자 하는 control 하단에 나오게 설정해준다. 

 

 

각 항목을 나타내는 것은 getReadContent 함수로 만든다. 

만약 값이 같다면 data 를 리턴한다. 

 

 

선택한 값과 맞는 값을 getReadContent() 의 data 값으로 리턴받아 _content 변수에 할당한다.

그 값을 UpdateContent 태그의 data에서 _content 인수로 값을 전달한다. 

 

 

 

따라서 이렇게 전달받은 값을 this.props.data로 로그를 찍으면

다음과 같이 정상적으로 들어간 것을 확인 가능하다.

 

 

 

props 의 데이터는 readonly이다.

가변적인 데이터를 위해서는 value 값을 state로 줘야한다. 

 

 

따라서 value 값도 this.state.title 로 준다.

onChange 를 통해 글을 변경하면 해당 값도 변경하게 설정해준다. 

 

 

설정은 함수를 별도로 만들었고, setState 를 통해 변경해준다.

[ ] 안에 e.target.name 을 하게 되면 name 값에 맞게 알아서 해당 내용을 변경해준다.

 

 

 

다음과 같이 리팩토링으로 코드를 깔끔하게 나타낼 수도 있다. 

 

 

어디를 변경할지에 대한 식별자가 필요함.

따라서 input과 같이 해당 식별자를 id로 주고 state 값을 준다. 

 

 

 

state값을 추가했으므로 state 값으로 간단하게 부른다. 

 

 

JavaScript 기능 중 Array.from 을 사용하면

기존에 배열을 복제한 새로운 배열이 생성된다. (불변성)

성분을 튜닝할 때 사용한다. 

 

쉽게 생각하면 객체나 배열을 수정하고자 하면 그 대상을 복제하고,

복제한 대상을 넣는 방식을 사용한다. 

 

 

수정을 완료하면 수정된 화면을 보여주도록 mode 를 read 로 변경해준다. 

 

 

수정을 완료하면 다음과 같이 변경된 화면을읽어주는 페이지로 바뀌게 된다.  

 

 

만약 delete 모드로 온다면 진짜 지울 것인지 confirm 을 통해 물어본다.

Array.from 을 통해 새 배열을 만든다.

 

해당 배열을 while을 통해 반복검증하고 만약 선택된 id 값과 같다면 해당하는 값까지로 splice 한다.

splice() 우리가 발견한 원소의 id값으로부터 1개를 지운다는 뜻이다.

 

다 돌았다면 mode는 welcome으로 contents 는 우리가 삭제한 배열이 뜨도록 설정한다.

 

delete 외 모드가 선택됐을 때는 선택된 모드가 state 값이 되도록 설정한다.  

 

■ 추가

---

● react router(플러그인 기능) : url에 따라 적당한 컴포넌트 실행해줌.

● create-react-app 

● npm run eject : 기본 설정을 바꿀 수 있음

● redux : 중앙에 데이터 저장소가 있어 모든 컴포넌트는 이 저장소와 직접 연결된다. 

따라서 저장소 데이터 변경되면 연관된 모든 컴포넌트 영향 받는다. 

● react server side rendering : 서버쪽에서 웹페이지를 완성한 후 클라이언트로 완성된 html 보낸다. (초기 구동 시간 단축)

react native : react와 같은 방법으로 native 앱 만들기 가능, 

※  native 앱 : IOS, 안드로이드 같은 플랫폼을 말한다. 하나의 코드로 모든 플랫폼에서 가능