[웹개발 기초 스터디] React(2) : Part1

17.1 - 17.3 컴포넌트 이벤트 만들기

• 우리가 만들려는 subject라는 컴포넌트는 onChangePage라는 이벤트가 있어서 이 컴포넌트 안에서 링크를 클릭했을 때 이 이벤트에 설치한 함수를 호출하도록 만들 것

//onChangePage 이벤트에 함수 설치
onChangePage = {function(){
	alert('hihihi');
	//this.setState({mode: 'welcome'});
}.bind(this)}

• onchangepage라고 하는 이 함수는 probs 형태로 subject에 전달됨
• a태그를 onClick 했을 때 함수가 실행됨, 실행됐을 때 첫번째 인자로 이벤트 객체가 전달됨
• 그 객체에 preventDefault(); 호출 // 페이지바뀌는거 방지
• this.props.onChangePage(); //props 로 전달된 onChangePage함수를 호출

 

18. 베이스 캠프

• props vs state
  • 차이점
    • props : 컴포넌트로 전달된 props 의 값은 바꿀 수 없음, 외부에서 props를 통해 컴포넌트를 제어함
    • State : 컴포넌트 내부적으로 필요한 상태를 관리
  • 공통점
    • UI를 바꿀 때 사용
• 상위 컴포넌트가 하위 컴포넌트로 값을 전달할 때 : probs
• //App(상위 컴포넌트) -> TOC (하위 컴포넌트) //probs 사용 data = {this.state.contents}
• 하위 컴포넌트가 상위 컴포넌트로 값을 전달할 때 : 이벤트
• //TOC(하위 컴포넌트) -> App(상위 컴포넌트) //이벤트 구현 onChangePage={function(id){ this.setState({ mode:'read'; selected_content_id:Number(id) }); }.bind(this)}
• REDUX : 하나의 데이터 저장소를 사용하는 것, 데이터 저장소의 값이 바뀌면 관련된 모든 컴포넌트가 알아서 바뀌도록 하는 테크닉

 

19.1. create 구현 : 소개

• CRUD : crate, read, update, delete
• react application 의 create 기능 구현해보기
  • create 버튼 누르면 → app component의 mode 가 create로 바뀜
  • 읽기에서 사용되고 있는 컴포넌트가 글을 추가할 때 사용하는 컴포넌트로 바뀜
  • 컴포넌트에는 폼이 들어있을 거임
  • 앱 컴포넌트의 컨텐츠의 목록에 새로운 컴포넌트 정보가 아이디 값과 제목과 본문이 객체로 담겨서 컨텐츠에 추가됨
  • 우리가 만들 것 : create를 누르면 글을 추가할 때 사용하는 폼이 나오고 그 폼에 내용을 넣어 작성하면 TOC 목록에 작성한 내용이 추가되는 것

 

19.2 create 구현 : mode 변경기능

1. create, update, delete 세가지 모드로 진입하는 버튼 만들기
   1. create, update : 어떤 특정한 페이지로 가서 거기서 오퍼레이션이 실행됨 → 링크사용
   2. delete : 버튼을 클릭할 때 즉시 실제로 삭제가 일어나도록 구현 → 링크 사용 비추천 → 버튼 기능 사용
2. 세가지 버튼목록을 컴포넌트(Control)로 만들어서 외부로 빼버림
3. control 로드하기
4. 컨트롤 컴포넌트에 이벤트 정의하기
   1. 세가지 버튼들 중 하나를 클릭했을 때 모드가 바뀌도록//클릭됐을 때 어떤 모드인지 알려줌
   2. <li><a href ="/create" onClick={function(e){ e.preventDefault(); this.props.onChangeMode('create'); }.bind(this)}>create</a></li> //onChangeMode가 호출 될 때 인자를 mode를 받음 (클릭된 현재 상태) <Control onChangeMode = {function(_mode)}{ this.setState({ mode:_mode//App 컴포넌트의 모드 state 값을 바꿈 }) }.bind(this)}></Control>
   3. //컨트롤 컴포넌트 수정

 

19.3. create 구현 : mode 전환기능

read 컴포넌트 → create 컴포넌트로 전환하기

1. 기존의 Content 이름을 ReadContent 로 바꾸기
2. CreateContent 컴포넌트 만들기
3. mode 에 값에 따라 가변적으로 내용이 출력되도록 → article 변수 생성하기
   1. 조금 코딩하고 확인하기!!!
   2. 컴포넌트 새로 만들고 import 까먹지 말기!!

else if (this.state.mode === 'create'){
	_article = <CreateContent></CreateContent>} 

 

19.4 create 구현 : form

• CreateContent 에 입력폼 만들기
• textareat 태그 :입력할 내용이 여러줄일 때 사용
• [ ] <form action ="/create_process" method="post">

Class CreateContent extends Component{
render(){
	console.log('Content render');
	return(
	<article>
		<h2>Create</h2>
		<form action="/create_process" method="post"
			onSubmit={function(e){
			e.preventDefault();
			alert('submit')
	}.bind(this)}>
<p>
<input type="text" name="title" placeholder="title">
</input></p>
<p>
<textarea name="desc" placeholder="description">
</textarea></p>
<p>
<input type="submit"></input></p></form></article>);}}