react기초4 - CRUD(Update , Delete 편)

UPDATE

form

- input value에 props값을 넣으면 수정이 안된다. (props의 값은 readonly

- 스테이트화

constructor(props){
	super(props);
	this.state={
    	title:this.props.data.title
    }
}

- 스테이트가 바꿔야하는 근거는 없다 -> 값이 바뀔려면 onChange특성을 사용한다.

<input
	onChange={function(e){
		// 한글자씩 바뀌는 값을 state에 동기화
		this.setState({title:e.target.value});
    }
>

- textarea : 값은 value값으로 설정

 

- 이벤트가 발생하는 태그의 이름 - 대괄호문법

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

 

** 스테이트 업데이트 (push)

var _contents = Array.from(this.state.contents);
_contents.push({id:this.max~~~~~~});
this.setState({
	contents:_contents
});

 

DELETE

- splice(i, 1) : i번째부터 한 개를 지우겠다.

 

+추가

1. immutable

2. router

   리엑트의 단점인 url 접근으로 구분할 수 없다! 를 해결해주는 Router

3. create-react-app

// 개발환경 수정
npm run eject

4. redux

모든 컴포넌트는 중앙의 데이터저장소에 저장 / 컴포넌트 변경에 따라 모든 컴포넌트 영향을 받음

5. react server side rendering

   서버 쪽에서 웹페이지를 완성 후에 클라이언트로 완성된 html을 전송 어플리케이션 구동

   초기 구동시간을 단축 / 로딩이 필요없는 어플리케이션 특징 유지

6. react native

   ios, android 구동도 가능한 리엑트