컴포넌트
- 컴포넌트의 기능 : 단순한 템플릿의 이상이다, 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것과 라이프사이클API를 이용해서 컴포넌트가 화면에서 나타나고사라지고 변화가 일어날 때 주어진 작업들 처리가능, 임의의 메소드를 만들어 특별한 기능을 붙여줄 수 있다
- 클래스형 컴포넌트
- 첫 컴포넌트 생성
- Props (컴포넌트의 속성 값을 가짐)
- state (컴포넌트의 상태 값을 가짐)
- state를 사용할 때 주의할 것
- 정리
8. 클래스형 컴포넌트
- 컴포넌트를 선언하는 두가지 방식
(1) 함수형 컴포넌트
(2) 클래스형 컴포넌트
//ES6 이전
function Dog (name) {
this.name = name;
}
Dog.prototype.say = function() {
console.log(this.name + ': 멍멍');
}
var dog = new Dog('검둥이');
dog.say();
// 결과 | 검둥이: 멍멍
--------------------------------
//ES6 문법부터
class Dog {
constructor (name) {
this.name = name;
}
say() {
console.log(this.name + ': 멍멍');
}
}
const dog = new Dog('흰둥이');
dog.say();
//결과 | 흰둥이: 멍멍- 함수형컴포넌트 장점
(1) 클래스형보다 선언하기가 훨씬 편리
(2) 메모리 자원도 클래스형보다 덜 사용
(3) 프로젝트완성 후 빌드, 배포시 결과물의 파일크기가 더 작다(사실상 큰차이는 없으니 무시해) - 함수형컴포넌트 단점
(1) state와 라이프사이클 API의 사용이 불가능했었는데 리액트v16.8 이후 Hooks기능으로 해결됨 - 리액트공홈 : 컴포넌트 새로 작성시 함수컴포넌트 + Hooks 권장하지만, 클래스형컴포넌트 기능은 반드시 알아야함.
9. 1st 컴포넌트 생성
- 파일만들기 → 코드작성하기 → 모듈 내보내기 및 불러오기
* 화살표함수 (ES6) : 함수를 파라미터로 전달 시 유용하다
기존 function을 대체할 수는 없다(용도가 달라서, 서로 가리키고 있는 this값이 다름)
// 1.
function BlackDog() {
this.name = '흰둥이';
return (
name : '검둥이',
bark : function () {
console.log(this.name + ': 멍멍!');
}
)
}
const blackDog = new BlackDog();
blackDog.bark();
// 결과 | 검둥이: 멍멍!
---------------------------------------------
// 2.
function WhiteDog () {
this.name = '흰둥이';
return {
name : '검둥이',
bark : () => {
console.log(this.name + ': 멍멍!')
}
}
}
const whiteDog = new WhiteDog();
whiteDog.bark();
// 결과 | 흰둥이: 멍멍!10. Props
props = properties
- 컴포넌트 속성을 설정할 때` 사용하는 요소이다.
- props 값은
해당 컴포넌트를 불러와 사용하는 부모컴포넌트에서설정할 수 있다.
- JSX 내부에서 props 렌더링
* JSX내부에서 {}기호로 감싸주면 된다.
const MyComponent = props => {
return (
<div>
안녕하세요, 제 이름은 {props.name}입니다.
</div>
);
};
export default MyComponent;- 컴포넌트 사용시 props값 지정
//App.js
import MyComponent from './MyComponent';
const App = () => {
return (
<MyComponent name='히jeen'/>
)
};
export default App;
// 결과 | 안녕하세요, 제 이름은 히jeen 입니다.- props 기본값 설정 : defaultProps
import MyComponent from './MyComponent';
const App = () => {
return (
<MyComponent />
)
};
export default App;
// MyComponent.js
const MyComponent = props => {
return (
<div>
안녕하세요, 제 이름은 {props.name}입니다.
</div>
)
};
MyComponent.defaultProps = {
name: '기본이름'
};
export defaule MyComponent;
// 결과 | 안녕하세요, 제 이름은 입니다.- 비구조화 할당 문법을 통해 props 내부 값 추출하기
props 값 조회할 때마다 props.name, props.children 처럼 앞에 props. 라는 키워드
이 작업을 더 편하게 하기 위해 〈비구조화할당〉문법을 사용하여 내부 값을 바로 추출하는 방법 쓰면 된다.
//MyComponent.js
const MyComponent = (props) => {
const {name, children} = props;
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br/>
children 값은 {children}입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본이름'
};
export default MyComponent;- 객체에서 값을 추출하는 문법 : 비구조화 할당 destructuring assignment (구조분해 문법)
- 함수의 파라미터 부분에서도 사용가능하다.
- 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용하는 것
// 위 컴포넌트 변경
const MyComponent = ({name, children}) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br/>
children 값은 {children}입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본이름'
}
export default MyComponent;
- propTypes를 통한 props검증
- 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용한다.
- 컴포넌트의 propTypes를 지정하는 방법은 defaultProps를 설정하는 것과 비슷
- 우선, propTypes를 사용하려면 코드 상단에
import 구문을 사용하여 불러와야 한다.
import PropTypes from 'prop-types';
const MyComponent = ({name, children}) => {
return (...)
};
MyComponent.defaultProps = {
name: '기본이름'
};
MyComponent.propTypes = {
//name값은 무조건 문자열string형태로 전달해야한다는 것
name: PropTypes.string
};
export default MyComponent;- isRequired를 사용하여 필수 propTypes 설정
MyComponent.defaultProps = {
name: 'defaultName'
};
MyComponent.propTypes = {
name: PropTypes.string,
//propTypes를 지정하지 않았을 때 경고메시지를 띄워주는 작업
// propTypes를 지정할 때 뒤에 isRequired를 붙여주면 된다.
favoriteNumber: PropTypes.number.isRequired
};- 더많은 PropTypes 종류
* array : []
* arrayOf : 특정 PropType으로 이루어진 [] 예를들면, arrayOf(PropTypes.number)는 숫자로 이루어진 배열
* boolean
* func
* number
* object
* string
* symbol : ES6
* node : 렌더링 할 수 있는 모든것(숫자,문자열, 혹은 JSX코드, children도 node PropType이다)
* instanceOf(클래스) : 특정 클래스의 인스턴스
* oneOf(['aa', 'asd']) : 주어진 배열요소 중 값 하나
* oneOfType([React,PropTypes.string, PropTypes.number]) : 주어진 배열 안의 종류 중 하나
* objectOf(React.PropTypes.number) : 객체의 모든 키값이 인자로 주어진 PropType인 객체
* shape
* any : 아무종류
- 클래스형 컴포넌트에서 props 사용
- 클래스형컴포넌트에서 props를 사용할 떄는 render()함수에서 this.props를 조회하면 된다.
- defaultProps와 propTypes
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
render()
const {name, favoriteNumber, children} = this.props //비구조화할당
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br/>
children 값은 {children}입니다. <br/>
제가 좋아하는 숫자는 {favoriteNumber}
</div>
)
}- State
-
리액트에서 state는, 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
-
props는 컴포넌트가 사용되는 과정에서
부모컴포넌트가설정하는 값이고 -
컴포넌트자신은 해당 props를 읽기 전용으로만 사용할 수 있다.
-
props를 바꾸려면 부모컴포넌트에서 바꿔야한다.
-
예를 들어 App컴포넌트에서 MyComponent를 사용할 때 props를 바꿔줘야 값이 변결될 수 있는 것.
-
반면, MyComponent에서는 전달받은 name값을 직접 바꿀 수 없다.
-
리액트에는 두가지 종류의 state가 있다
(1) 클래스형 컴포넌트가 지니고 있는 state
(2) 함수컴포넌트에서 useState라는 함수를 통해 사용하는 state이다.
//Counter.js
import React, {Component} from 'react';
class Counter extends Component {
super(props);
//state의 초기값설정하기
this.state = {
number: 0
}
}
render() {
const {number} = this.state
return (
<>
<h1> {number} </h1>
<button
onClick = {() => {
this.setState({number: number+1})
}}
>
+1
</button>
</>
)
}
export default Counter;
* 컴포넌트에 state를 설정할 때는 다음과 같이 constructor메소드를 작성하여 설정한다.
constructor(props) {
super(props);
this.state = {
number: 0
};
}
-> 컴포넌트의 생성자메소드이다.
클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해줘야한다.
이 함수가 호출되면 현재 클래스형컴포넌트가 상속 받고 있는
리액트의 Component클래스가 지닌 생성자함수를 호출해준다.
그 다음에는 this.state 값에 초기값을 설정
컴포넌트의 state는 객체 형식이어야한다.
* render()
render() {
const {number} = this.state
return (
<>
<h1> {number} </h1>
<button
onClick = {() => {
this.setState({number: number+1})
}}
>
+1
</button>
</>
)
}- state 객체 안에 여러값이 있을 수 있다
// Counter.js
import React, {Component} from 'react';
class Counter extends Componenet {
constructor(props) {
super(props);
this.state = {
number: 0,
fixedNumber: 0
};
}
render() {
// state를 조회할 때는 this.state로 조회한다.
const {number, fixedNumber} = this.state;
return (
<>
<h1> {number} </h1>
<h2> 바뀌지 않는 값: {fixedNumber} </h2>
<button
onClick={() => {
this.setState({number: number+1})
}}
>
+1
</button>
</>
)
}
}import React, {Component} from 'react';
class Counter extends Componenet {
state = {
number: 0,
fixedNumber: 0
}
render() {
const {number,fixedNumber} = this.state
}
}- setState 사용하여 값을 업데이트하고 난 다음에 + 특정 작업을 하고싶을 때는
- setState의 두번째 파라미터로 콜백함수 넣는다
<button
onClick={() => {
this.setState({
number: number+1
}, ()=>{
console.log('방금 setState가 호출되었습니다.')
console.log(this.state)
});
}}
>
+1
</button>