리액트를 다루는 기술-3 (컴포넌트)

UI를 만들고, 나타날 때, 사라질 떄, 변경이 일어날 떄 주어진 작업들을 처리함

컴포넌트 생성 방식

• 리액트는 함수 컴포넌트와 클래스 컴포넌트를 생성할 수 있음

클래스 함수

장점	라이프 사이클 API를 사용할 수 있기 때문에 컴포넌트의 흐름을 파악하기 좋음	선언하기 편하고 자원을 덜 사용함
단점	생성시 API를 모두 사용할 수 있게끔 하기 때문에 사용하지 않는 것들 까지 가지고 있어 자원을 더 많이 사용 함	state와 라이프 사이클 API 사용이 불가능⇒ Hook으로 해결할 수 있음

---

props ( properties)

• 부모 컴포넌트에서 주입 받은 데이터들 (값, 객체, 함수, 배열 등)
• 사용 방법
  • 기본

    const MyComponent = props => {
    	return <div> 안녕하세요, 제 이름은 {props.name}입니다. </div>
    }
    
    export default MyComponent
    

    App.js
  • import MyComponent from '파일 주소' const App = () => { return <MyComponent name="React"/> }
  • MyComponent.js
  • defaultProps 지정
  • const MyComponent = props => { return <div> 안녕하세요, 제 이름은 {props.name}입니다. </div> } MyComponent.defaultProps = { name: '기본이름' } export default MyComponent
  • children
    • 컴포넌트 태그 사이의 내용을 가지고 있는 property

    import MyComponent from '파일 주소'
    const App = () => {
    	return <MyComponent name="React">children</MyComponent>
    }
    
    

    const MyComponent = ({name, children}) => {
    // 비구조화 할당 (destructuring assignment)
    	return <div> {props.children} </div>
    }
    
    export default MyComponent
    

• propTypes 라이브러리
  • 런타임에 props의 타입을 지정하고 검사하기 위한 라이브러리
  • 타입스크립트를 사용해도 필요할 수도 있음

    const MyComponent = ({name, children}) => {
    // 비구조화 할당 (destructuring assignment)
    	return <div> {props.children} </div>
    }
    
    MyComponent.propTypes = {
    	name: PropTypes.string.isRequire
    }
    
    export default MyComponent
    

  • → 부모 컴포넌트에서 props의 타입을 any로 넘겨줄 경우에 에러가 발생하지 않기 때문

---

State

1. 클래스 컴포넌트에서의 state 사용

• render 함수에서 this.state 로 사용할 수 있음 (멤버변수)
• constructor에서 기본값 지정 할 수 있음
• setState({업데이트 상태} or 함수, 콜백)

class Component {
	constructor(){
		this.state = {초기상태}
	}
	
	render(){
		return <div>
		{this.state}
		<button onClick={this.setState(변경된 상태 or 실행할 함수)}>plus</button>
	</div>
	}
}

2. 함수 컴포넌트에서 useState 사용

function Component() {
	const [state, setState] = useState(초기상태)

	return <div> </div>
}

React Hook useState 직접 구현하기!

3. setState를 사용해서만 업데이트 해야하는 이유

• 리액트는 컴포넌트를 사용할 때마다 새롭게 렌더링을 하기 때문에 state를 유지하지 못하고 초기화 되기 때문
• 클로저 형태로만 이전의 데이터를 유지할 수 있음