React 4-1. 컴포넌트(1)

목차

1. 컴포넌트란?
2. 컴포넌트의 유형?
3. class로 정의된 컴포넌트
4. 함수로 정의된 컴포넌트
5. 컴포넌트 렌더링
6. 컴포넌트 합성
7. 컴포넌트 추출

 

 

 

 

1. 컴포넌트란?

• UI를 독립적이고 재사용 가능한 여러 조각으로 나누는 것
• 컴포넌트는 엘리먼트를 함수나 클래스에 담는 행위
• 결과물을 JSX로 반환
• 개념적으로 JS 함수와 유사
• props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는 지를 기술하는 React 엘리먼트(리액트가 이해할 수 있는 객체)를 반환

 

 

2. 컴포넌트의 유형

• class
• 함수

 

 

3. ES6 class로 정의된 컴포넌트

• class로 정의된 컴포넌트는 보다 많은 기능을 제공함
• React 컴포넌트 class 정의를 위해서는 React.Component를 상속받아야 함
• React.Component의 하위 class에서 반드시 정의해야 하는 메서드는 render()
• render() 외의 메서드들은 선택사항

 

class App extends React.Component{
    render(){
        return(
            내용
        )
    }
}

 

<참고>
React 컴포넌트 사용 시에는 상속보다 주로 합성을 사용한다.
따라서 클래스를 직접 만들어서 사용하지 말자.

 

 

 

4. 함수로 정의된 컴포넌트

function App(){
	return (
    	내용
    )
}

 

 

 

5. 컴포넌트 렌더링

• React는 사용자 정의 컴포넌트로 작성한 엘리먼트 발견 시, JSX 속성과 자식을 해당 컴포넌트에 'props'라는 객체로 전달

 

<주의>
컴포넌트명은 항상 대문자로 시작
(React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리)

 

 

 

6. 컴포넌트 합성

• 컴포넌트가 자신의 출력에 다른 컴포넌트를 참조하는 것을 의미
• 모든 세부단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 뜻함

 

• 일반적으로 새 React 앱은 최상위에 단일 App 컴포넌트를 가진다.
• 단, 기존 앱에 React를 통합하는 경우에는 작은 여러개의 컴포넌트를 하위에서부터 상단까지 점진적으로 작업해야 하는 경우도 있다.

 

 

class Hello extends React.Component {
    render() {
        return(
            <span>Hello</span>
        )
    }
}

class World extends React.Component{
    render(){
        return (
            <span>World!</span>
        )
    }
}

class App extends React.Component {
    render() {
        return (
            <div> 
               <Hello/> <World/>
            </div>
        )
    }
}

 

 

7. 컴포넌트 추출

• 컴포넌트를 여러개의 작은 컴포넌트로 나누는 것
• 컴포넌트의 구성요소들이 중첩 구조로 이루어져있을 경우 변경 및 각 구성요소들에 대한 개별적 재사용이 힘듦 > 컴포넌트 추출

 

• 컴포넌트 추출 작업은 지루한 작업이지만, 재사용 가능한 컴포넌트를 생성하는 것은 사이즈가 큰 앱에서 작업할 때 유용
• 특히 UI 일부가 여러번 사용되거나, UI 일부가 자체적으로 복잡한 경우 별도의 컴포넌트로 만드는 것이 좋음

 

• props의 이름은 사용될 context가 아닌 컴포넌트 자체의 관점에서 짓는 것이 권장됨