props 와 state
#props#
: props = 컴포넌트의 속성
: 컴포넌트를 유연하게 사용할 수 있도록 한다.
|
|
|
|
1. 컴포넌트 사용자 (App.js) |
html 태그에 속성 넣는 것 처럼 쓴다.
<Welcome name="Sara" />;
|
|
2. 컴포넌트 |
(1) 예시 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
(2) 즉, {} 를 사용한다. => react에서 변수 넣을떄는 {} 요거 사용
|
|
|
|
|
|
|
# state#
1. state 기초
|
1. props와 비교 |
1) props : 컴포넌트 사용자(즉, 여기선 App.js)가 해당 컴포넌트에 정보를 전달하는 수단 (사용자가 해당 컴포넌트를 유연하게 조작하기 위한 도구 개념)
2) state : 해당 컴포넌트의 내부 상태(내부 정보) => 사용자 |
|
2. 간단 설명 |
부모에 정의되어 있는 state는 props에 주입되며 , 자식은 props 를 통해 해당 state의 정보를 사용가능하게 된다. |
|
- 컴포넌트 사용자의 코드 (App.js ) |
class App extends Component{ // 어떤 컴포넌트를 실행 할때 render 함수 보다 먼저 실행되어 // 그 컴포넌트를 초기화 하는 코드는 constructor 내부에 작성한다. constructor(props){ super(props) this.state = { subject:{title:'WEB', sub:'World Wild Web'}, contents:[ {id:1, title:'HTML', desc:'HTML is HyperTextt...'}, {id:2, title:'CSS', desc:'HTML is HyperTextt...'}, {id:3, title:'JavaScript', desc:'HTML is HyperTextt...'} ] } } render(){ return ( <div className="App"> <Subject title={this.state.subject.title} sub={this.state.subject.sub}> </Subject> <TOC data={this.state.contents}></TOC> <Content title="HTML" desc="Html is HyperText Markup Language."></Content> </div> ); } }
|
|
-컴포넌트 코드 (TOC.js) |
class TOC extends Component{ render(){ let lists = [] let data = this.props.data for(let i=0; i<data.length; i++){ lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>) } return( <nav> <ul> {lists} // 이런 형식으로 배열자체를 넘겨주면 react가 배열 내부 정보를 알아서 사용 </ul> </nav> ) } }
// 여러개의 목록을 자동 생성할 떄에는 각 목록별 특유의 key를 입력해 줘야한다. 이는 react내부적으로 구분하기위한 키워드 일뿐이다. |
|
-컴포넌트 코드 (Subject.js) |
class Subject extends Component { render(){ return ( <header> <h1>{this.props.title}</h1> {this.props.sub} </header> ); } }
|
|
3. 동적으로 state 변경 |
이벤트를 거는 등의 방법을 동적으로 state를 변경하고자 하는 경우 별도의 함수를 쓴다. [ => setState( ) ] |
|
|
-예시- <h1><a href="/" onClick={function(e){ console.log(e) e.preventDefault(); // 1.이벤트 실행시 이벤트 내부 함수에 이벤트를 자동으로 매개변수로 집어 넣어준다. // 따라서 여기서 e 는 매개변수로 들어온 이벤트를 의미. // 2. e.preventDefault : 해당 태그의 기본적인 동작을 막는다. // 여기서는 a 태그의 기본 동작을 막는다. // (a태그 기본동작 : href 가 가르키는 주소로 이동) console.log("이벤트내부",this) console.log("모드",this.state.mode) if(this.state.mode === 'welcome'){ // this.state.mode = 'read';// react에서는 별도로 state를 변경하는 함수가 존재. this.setState({ mode: 'read' }) }else{ this.setState({ mode: 'welcome' }) } //이벤트 함수 내부에서 this 는 undefined => 이를 해결하기위해 해당 이벤트 함수에 this 값을 // bind 해준다. }.bind(this)}>{this.state.subject.title}</a></h1>
|
|
4. setState |
(1) 동적으로 state 의 값을 변경시 사용 |
<생활코딩 강의>