🧸개념

---

입력 : Props
출력 : React element

🎀props

• 리액트 컴포넌트의 속성
• 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

✨props의 특징

• 읽기 전용
• 모든 리액트 컴포넌트는 프롭스를 직접 바꿀 수 없고, 같은 프롭스에 대해서는 항상 같은 결과를 보여줌

  

jsx없이 props넣는 법

✨함수형 컴포넌트(Functional Component)

• 클래스형 컴포넌트에 비해 선언 방식이 간단
• state, Life Cycle 사용X(hook으로 대체 사용)
• 메모리 자원이 클래스 컴포넌트에 비해 덜 사용됨
• 재사용성과 확장성 높음(리액트 16.8버전 이후)

사용법

function Welcome(props) {
	return <h1>안녕, {props.name}</h1>;
}

✨클래스 컴포넌트

• 필수항목
  • class 선언
  • React.Component 상속
  • render()메소드
• Life Cycle, state 사용
• 메모리 자원이 함수형 컴포넌트에 비해 많이 사용됨
• 컴포넌트가 복잡하며, 로직 재사용 어려움

사용법

• React.Component를 상속받아 만듦

class Welcome extends React.Component {
	render() {
    	return <h1>안녕, {this.props.name}</h1>;
    }
}

• 컴포넌트 이름은 항상 대문자로
• 리액트는 소문자로 시작하는 컴포넌트를 dom태그로 인식함
  

컴포넌트 랜더링 과정

Welcome -> 컴포넌트
1. <Welcome name="인제"/>라는 값을 가진 엘리먼트를 파라미터로 ReactDom.render함수 호출
2. 리액트는 Welcome 컴포넌트에 name="인제"라는 props를 넣어서 호출
3. 엘리먼트 생성
4. 이렇게 생성된 엘리먼트는 리액트 돔을 통해 실제 돔에 적용되고 사용자의 눈에 보이게됨