-javascript의 라이브러리
-반복적인 코드를 컴포넌트를 통해 간략화 할 수 있다.
JSX(syntax extension for javascript)
-html의 문법으로 javascript 파일내에 작성한다.
-원래 javascript문법이 아니기 때문에 js 파일내에 있으면 브라우저에서 해석을 못한다. 그래서 javascript 문법으로 변화시키는 컴파일 과정이 필요하다.
JSX element
const hi = <p>Hi</p>;-변수에 저장 가능
const fruit = {
apple : <li>red</li>
banana : <li>yellow</li>
}-함수 인자로 넘기는 것도 가능하다.
JSX attribute
-태그에 attribute(속성)를 줄 때는 따옴표로 감싼다.
-html에서 쓰는 속성명과 다를 수 있다.
<div className = "hi"></div>self closing tag
-<input> 처럼 태그 하나를 사용하는 태그는 <input />로 끝내야한다.
-<div />는 <div> </div>와 같다.
nested JSX
-중첩된 요소는 ( )(괄호)사용
-항상 하나의 태그로 시작해야한다.
const right = (
<div>
<p>hi</p>
<p>hello</p>
</div>
);rendering
-html요소, react요소와 같은 코드가 눈으로 볼 수 있도록 그려지는 것
-dom node에 추가돼 화면에 렌더되기 위해서는 ReactDOM.render함수를 사용한다.
ReactDOM.render(
<h1>Hello, World!</h1>
document.getElementById(‘root’)
); -html에서 id가 'root'인 자리에 <h1>Hello, World!</h1>를 보여준다.
-첫번째 인자 : jsx로 화면에 표시할 내용,
두번째 인자 : 화면에 표시하고 싶은 내용의 부모요소
▼ html내 적용화면(개발자도구 elements탭에서 확인 가능)
<div id=”root”>
<h1>Hello, World!</h1>
</div>component
-독립적으로 재사용가능한 코드를 관리한다.
-동일한 코드가 반복되는 부분에 컴포넌트를 만들어서 재사용한다.
-하나의 컴포넌트에 필요한 html,css,js를 모두 합쳐서 만들 수 있다.
-컴포넌트의 인자는 props이다.
-화면에 보여져야할 React요소가 return된다.
함수로 컴포넌트 구현하기
function Welcome(props){
return <h1>Hello, {props.name}</h1>
}
Reactdom.render(
<Welcome />,
document.getElementById(‘root’)
);class로 컴포넌트 구현하기
class Welcome extends React.Component {
render(){
return <h1>Hello, {this.props.name}</h1>;
}
}-React.Component를 extend해서 생성한다.
-render()메서드와 return이 필요하다.
컴포넌트 사용하기
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}-컴포넌트에 attribute를 추가할 수 있다. ex)name=""
-컴포넌트의 parameter로 해당 attribute를 받아서 사용한다.(props(=property))
state
-컴포넌트의 상태 값.
-state와 props는 객체이고 화면에 보여줄 정보를 보여주고 있다는 점에서 비슷하다.
-컴포넌트 내에서 정의하고 사용한다.
-this.setState()를 사용해 state를 업데이트한다.
*props는 컴포넌트를 사용하는 부모쪽에서 전달해야 사용가능
props
-property로 구성된 객체
-property로 문자열, 숫자, state값, 함수 등을 넘길 수 있다.
-부모-자식 관계에서 사용할 수 있다.
ex) 새로운 컴포넌트 New.js 생성 후 index.js안에서 import하는 경우
index.js의 jsx가 부모가 되고, <New />가 자식이 된다.
index.js 컴포너트 내부
class index extends React.Component { constructor(){ super(); this.state = { name : "abc", age : "20", } } render(){ return ( <div> <div>hello</div> <New /> </div> ) } }-index.js에서 name의 state를 name이라는 이름으로 props로 넘기고 싶은경우
<New name={this.state.name}/>class New extends React.Component { console.log(this.props); render(){ return ( <div>{this.props.name}</div> ) } }console
{name : "abc"}화면
abc
Component의 life-cycle
1.mounting
constructor()
-class의 instance가 생성될 때 항상 호출되는 함수(생성자)
-초기화할 값을 세팅해준다.(this.state)
-super()가 필요하다.(class 컴포넌트에 있는 메서드(exrender)를 사용할 수 있다.)
render()
-화면에 그려짐
componentDidMount()
-상태를 업데이트한다.(this.setState로 state 변경)
2.updating
componentDidUpdate()
-정의하지 않으면 render() 호출
render()
-변경한 state를 반영해 화면에 적용
3.unmounting
componentWillUnmount()
-컴포넌트가 더이상 필요없을 때, 다른페이지로 갈 때 사용
event handling
class 컴포넌트 내에서 onClick이벤트를 사용해 클릭시 state가 변경되도록 했을때
render(){
return (
<div onClick ={()=>{this.setState({clicked : !this.state.clicked })}}>
);
}
}render메서드 내의 React요소에 함수가 포함되어있어 깔끔하지 않다. event handler부분을 따로 빼서 작성하면 다음과 같다.
constructor(){
super();
this.state = {
clicked: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState({
clicked: !this.state.clicked
});
}
render(){
return (
<div onClick ={this.handleClick}
>
{this.state.clicked ? '좋아요' : '싫어요'}
</div>
);
}
}함수 handleClick을 만들어 state를 업데이트 한다. 이때 constructor메서드 내에 this.handleClick = this.handleClick.bind(this);를 꼭 작성해야한다.
this를 handleClick에 넘겨서 handleClick매서드 내에서도 같은 this를 쓰도록 해 컴포넌트의 this.state에 접근하고 setState함수를 사용 가능하도록 한다.
bind 해주지 않으면 this의 context를 잃어버려서 this가 undefined가 된다.
*이벤트 발생시 호출되는 함수를 arrow function으로 사용하면 bind 해주지 않아도 된다.
