(11) Eclipse 프로젝트에서 React 사용하기 - 5
state / props 를 사용해서 component를 작성해봅시다.
다시 한 번 짚어봅니다.
1) state
- 내부적으로 데이터를 저장할 목적으로 사용되는 속성입니다.
- 변경이 가능한 데이터가 저장됩니다.
- constructor()를 사용해서 초기화 설정이 가능합니다.
- 이를 위해 클래스를 사용합니다.
2) props
- 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용됩니다.
- parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용됩니다.
2-1) props의 사용
- 컴포넌트에서 immutable (변하지 않는) 데이터가 필요 할 땐, render() 메소드의 내부에 { this.props.propsName } 형식으로 넣어줍니다.
- 컴포넌트를 사용 할 때, < > 괄호 안에 propsName="value" 를 넣어 값을 설정합니다
3) this의 사용
- render함수 '밖'에 선언되어 있는 개체를 선언 할 때에는 {this.호출할 함수명} 으로 사용합니다.
- render함수 '안'에 선언된 개체는 1. 매개변수를 받으면 (e) 아니면 2. ()로 표현합니다.
ex) const clickHandler = function(e){ 처리구문}
4) class 방식 / ()화살표 함수방식
- 데이터를 주로 출력목적으로 사용하는 경우에는 화살표 함수를 이용합니다.
- 화살표 함수를 이용해서 화면에 출력할 경우엔 render()를 사용하지 않습니다. class가 아니기 때문입니다
적용해봅시다 2.class 폴더밑에 1.class1.html
: [1]클래스 사용 [2]화살표 함수 사용 으로 나누어집니다. 둘 중 하나는 주석처리 해야 작동됩니다. 또한 render() 함수 내의 주석은 지워주세요
<title>리액트 예제(컴포넌트 작성방법 2가지)</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// [1] 클래스 사용
class Hello extends React.Component{ // Hello라는 클래스를 만듭니다.
render(){ //랜더링
const clickHandler=(e)=>{
// 화살표 함수에요!!
//const clickHandler=function(e){ ~}
alert('안녕하세요')
}
// 클릭하면 clickHanlder 라는 이벤트가 실행된다는 markup을 리턴합니다.
return(<div onClick={clickHandler}>
<h1>Testing!!</h1>
</div>)
}//render
}
// [2] 화살표 함수 사용
// 데이터를 주로 출력목적으로 사용하는 경우에는 화살표 함수를 이용합니다.
const Hello=()=>{//const Hello=function(){}
/*
화살표 함수를 이용해서 화면에 출력할 경우엔
render()를 사용하지 않습니다. class가 아니기 때문입니다.
*/
const clickHandler=(e)=>{
alert('함수를 이용해서 이벤트처리함!')
}
return(<div onClick={clickHandler}>
<h1>Testing2</h1>
</div>)
}
ReactDOM.render(<Hello />,document.getElementById('root'))
</script>
</body>
</html>5) 이번엔 화살표함수로 컴포넌트를 정의해서 Render에 뿌려보도록 합니다.
화살표 함수로 컴포넌트를 정의 (Book, TitleParts(제목), ContentParts(내용))** 합니다.
형식1) const 컴포넌트명=()=>(처리내용)
: 매개변수 없는 컴포넌트 작성 , 화살표함수
형식2) const 컴포넌트명=(props)=>(처리내용)
: 매개변수 있는 컴포넌트 작성 , 화살표함수
- 적용해봅시다 2.class 폴더밑에 1.classprops.html
- 한개의 script 내부에 const 상수안에 컴포넌트를 정의합니다.
- 그걸 또 부모태그격인 Book 에 결합시킵니다.
- 마지막으로 출력할 dom 이라는 const 객체에 결합시켜서
- ReactDom 을 사용해서 root로 뿌려줍니다.
<body>
<div id="root"></div>
<script type="text/babel">
const TitleParts = (props)=>(
<div style={{backgroundColor:'red',color:'white'}}>
<h3>{props.title}</h3>
</div>
)
const ContentParts = (props)=>(
<div style={{border:'1px solid blue',margin:15}}>
<h3>{props.body}</h3>
</div>
)
//부모=>화살표함수를 사용하면 this를 생략이 가능합니다!
const Book = (props)=>(
<div>
<TitleParts title={props.title} />
<ContentParts body={props.body} />
</div>
)
//전체 컴포넌트를 사용해서 배치시킬 내용을 담을 변수선언
const dom=<div>
<Book title='삼국지' body='중국의 영웅들의 이야기' />
<Book title='민수기' body='이스라엘 역사 이야기'/>
<Book title='서유기' body='중국의 손오공 이야기'/>
</div>
ReactDOM.render(dom,document.getElementById('root'))
</script>
</body>
6) 생성자를 통해서 값을 초기화 하고, render() 내부에 함수를 정의해서 사용해봅시다.
1) render함수 밖에 함수를 선언하면, setState()를 이용한 구문이 있는 경우엔 생성자 연결이 필수입니다.
2)render함수 내부에 함수를 선언하게 되면, bind 하지 않아도 됩니다.
- 적용해봅시다 3.class.html
- constructor()로 초기값을 설정합니다.
- render() 내부에 clickHandler 라는 이벤트 처리 함수를 선언합니다.
- return 부분에 onClick으로 이벤트를 연결시킬 컴포넌트를 선언합니다.
- dom이라는 const객체에 컴포넌트를 부착시키고 매개변수(props)를 전달해줍니다.
- ReactDOM 객체로 랜더링해서 뿌려줍니다.
<body>
<div id="root"></div>
<script type="text/babel">
class Hello extends React.Component{ //const Hello=(props)=>{}
//생성자를 통해서 초기값 설정
constructor(props){
super(props)
//this.clickHandler=this.clickHandler.bind(this)
//setState가 없기때문에, 굳이 bind 하지 않습니다.
}
//render함수 밖에 함수선언=>setState()를 이용한 구문이 있는 경우
render(){
//render함수 내부에 화살표함수를 이용
const clickHandler=(e)=>{
// 클릭이벤트가 발생하면, 해당 props의 name 값이 저장되고 출력합니다.
const name=this.props.name
alert(`${name}님 안녕하세요?`)
}
// div를 클릭하면 clickHandler 함수로 연결됩니다.
return(<div onClick={clickHandler}>
<h1>{this.props.name}</h1>
</div>)
}
}
const dom=<div>
<Hello name="devtaco" />
<Hello name="sk8taco" />
<Hello name="mushroomtaco" />
</div>
ReactDOM.render(dom,document.getElementById('root'))
</script>
웹프로그래밍 공부를 시작한 패션디자이너 출신 웹린이