6. Update & Delete 기능 구현 - React 기초 | 생활코딩

[출처 : https://opentutorials.org]

20-2. Update 구현 : form 

# props의 data는 read-only이기에, props를 value 값으로 지정하면 read-only가 되어 수정 불가하다.

   → props를 value 값으로 사용하려면 컴포넌트 안에서 가변적인 데이터(state화)로 만들어야 한다.

 

# input의 value로 state 값을 지정했다 하더라도 value의 값이 바뀐다고 해서 state의 값이 바뀌어야 하는 근거는 없다.

   → input의 value가 바뀌었을 때 state의 값도 바뀌도록 한다.

<input value={this.state.title}
       onChange={function(){
         this.setState({title:e.target.value});
       }.bind(this)}

 

※ 계산된 속성명 [] :

각괄호 [] 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 속성 접근자 구문의 각괄호 표기법을 연상시킨다.

 

# 객체(배열)를 수정할 때는 대상 객체를 복제하고 복제한 것을 수정한다.

---

 

22. 수업을 마치며

immutable.js

배열, 객체의 대체제로 사용 가능. 모든 연산이 원본을 변경하지 않고 복제된 원본을 변경한 결과를 리턴한다.

 

react router

url에 따라서 적당한 컴포넌트가 실행되게 할 수 있다. 퍼머링크(permalink) 기능을 제공한다.

*permalink : url로 접근하는 사용자에게는 url에 해당하는 UI를 보여준다.

 

npm run eject

create-react-app의 감춰진 여러 설정을 수정할 수 있다. *한번 eject을 하면 돌아갈 수 없다.

 

redux

중앙에 데이터 저장소를 만들고 모든 컴포넌트는 중앙의 저장소와 직접 연결된다. 저장소의 데이터가 변경되면 관련된 모든 컴포넌트가 영향을 받아서 변화된다.

 

react server side rendering

서버쪽에서 웹페이지를 완성한 후에 클라이언트로 완성된 HTML을 전송하는 것으로 어플리케이션을 구동을 시작할 수 있다.

- 초기 구동 시간의 단축

- 로딩이 없는 애플리케이션의 특성 유지

- 검색엔진과 같은 로봇들이 html 태그를 직접 읽을 수 있도록 할 수 있기 때문에 웹페이지 분석에 친화적

 

react natvie

react와 같은 방법으로 native 앱을 만들 수 있다. 하나의 코드로 거의 모든 플랫폼에서 동작하는 애플리케이션을 만들 수 있다.

*native 앱 : IOS, 안드로이드와 같은 플랫폼