[React] 컴포넌트

react

Component

컴포넌트는 react에서 화면을 구성하는 하나의 요소입니다.

헤더, 메인, 메뉴바, 기사목록 등 화면을 하나의 컴포넌트로 구성할 수 있습니다. 무자비하게 마구 분리한다면, 너무나 많은 파일이 만들어지므로 적당하게 크기를 잡고 컴포넌트를 지정하는 게 필요합니다.

컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있습니다. 현재는 함수형 컴포넌트를 사용하도록 권장하고 있습니다.

function component 강조

 

https://react.dev/reference/react/PureComponent#migrating-from-a-purecomponent-class-component-to-a-function

PureComponent – React

 

클래스형 컴포넌트

class 컴포넌트명 extends Component {
    render() {
        <div>
        </div>
    }
}

클래스형 컴포넌트에서는 렌더링 시 render 메소드를 사용합니다.

 

함수형 컴포넌트

function 컴포넌트명() {
    return (
        <div>
        </div>
    );
} 
const 컴포넌트명 = () => {
    return (
        <div>
        </div>
    );
}

함수형 컴포넌트는 렌더링시 return 문을 사용합니다.

클래스형 컴포넌트와 함수형 컴포넌트는 성능이 비슷하지만, 함수형 컴포넌트가 메모리를 적게 씁니다.

그래서 함수형 컴포넌트 사용을 권장합니다.

 

props

props는 컴포넌트의 상태 값 중 하나입니다. 부모로부터 상속받는 값이며, 상속 시 속성으로 지정되어 상속받기 때문에 속성값이라고도 합니다.

props를 간단하게 선언해보겠습니다. 부모와 자식 관계를 두고 보면 상속이라 볼 수 있겠죠?

fucnction Children(num) {
    return (
        <div>
        자식 컴포넌트
        </div>
    );
}

function Parent() {
    let num = 0;
    return {
        <Children num={num}></Children>
    }
}

props의 값은 부모컴포넌트에서 지정할 수 있고 자식에서 변경하려면 부모의 메소드를 상속받아서 부모의 메소드를 호출해야합니다.

 

props를 받는 방식은 두 가지가 있습니다. 먼저, props 변수로 넘어오는 값들을 한 번에 받는 방식이 있고, 비구조할당으로 넘어오는 값들을 각각 받아주는 방식이 있습니다. props로 부모에 있는 메소드도 넘겨 줄 수 있습니다.

state

state는 props와 마찬가지로 컴포넌트의 상태변수중 하나입니다. state의 값이 변하면 해당 컴포넌트가 리렌더링 됩니다. 함수형 컴포넌트에서는 Hooks라는 기능들을 이용하게 되는데 state변수를 만드는 것도 Hooks의 기능 중에 하나입니다.  또한, useState()메소드를 이용해서 state 변수를 생성할 수 있고, useState()의 매개변수로는 state의 초기값을 넣어줄 수가 있는데 string, number, array 타입 등 모든 javascript의 타입을 사용할 수 있습니다. 그 외에도, state는 항상 변수와 setter메소드를 쌍으로 만들어줍니다.

 

state는 다음과 같이 선언합니다.

const [state변수명, setter메소드] = useState(state 변수의 초기값);

부모의 state를 props로 자식으로 보내줄 수 있습니다. 혹은, 부모의 state를 자식에서 변경하고 싶을 때가 있습니다. 이 때,  setter메소드를 호출하는 메소드를 부모컴포넌트에 만들어서 해당 메소드를 자식 컴포넌트에 props로 넘겨 메소드를 호출하고, 부모 컴포넌트의 state의 값을 변경하면 됩니다.

 

이벤트 핸들링

기본적으로, react에서 이벤트를 매핑할 때는 카멜케이스 표기법을 사용합니다.(onclick => onClick, onkeydown => onKeyDown)

이벤트에서 실행할 내용은 대부분 메소드형태로 전달합니다. 또한, 이벤트를 매핑할 때 직접 메소드를 화살표 함수 형태로 전달해도 되고, 외부에 메소드를 선언한 다음 매핑해도 됩니다.

 DOM 요소인 html 태그에만 이벤트를 등록할 수 있고 컴포넌트에는 이벤트 등록이 불가능합니다. 컴포넌트에 onClick을 만들어주면 props로 인식합니다. 이를 잘 활용해야 겠습니다.