[React] #3. 리액트의 컴포넌트 - 1

exoluse·2021년 9월 9일
0

React

목록 보기
4/20
post-thumbnail

Hello World! 이후 오랜 정적

아무래도 찍먹 이후에는 뭔가 새로운 것을 갈망했던 이글거리는 열정은 조금 사그러들기 마련이다. React라고 해도 이것을 피할 수는 없었나보다. 식어가는 분위기를 다시 반전시켜보자는 의미로 이 글을 쓰고 있다.

JSX ?!

Introducing JSX
https://reactjs.org/docs/introducing-jsx.html

2줄 요약하면 JSX는 자바스크립트의 확장 문법이고 XML과 비슷하게 생긴 이 소스를 빌드하면 자바스크립트 객체(리액트 엘리먼트)로 변환된다. 한번 읽어보기 바란다.

const element = <h1> Hello, world! </h1>;

내가 본 관점의 컴포넌트

다른 블로그를 보니 조금 어렵게 설명이 되어 있어서 내가 본 관점으로 조금 쉽게 설명을 하자면 다음과 같다.

let [vals, changeVals] = useState("Value");
...
...
<ParentComponent>
    <ChildComponent vals={vals} changeVals={changeVals} />
</ParentComponent>
...
...

function ChildComponent (props) {
    return (
    	<>
            <div>
                {props.vals}
            </div>
            <button onClick={ props.changeVals("Value!!") }></button>
            
        </>
    );
}

부모--state------>자식(props.parentState)<------state--부모

부모 컴포넌트와 자식 컴포넌트 간에 "props" 라는 연결장치를 놓고 부모 컴포넌트에서 선언된 변수의 "state"(값, 상태변경)를 자식 컴포넌트에서 받아서 사용이 가능하다. 이외에 Context API, redux 와 같은 유용한 것들도 적용 가능하다. 내가 아직 공부가 부족해서 그런지는 몰라도 자식 컴포넌트에서 부모 컴포넌트로의 state 공유는 아직 확인된 바가 없다. 확인 되는 대로 포스팅 해보겠다.

import와 export

위 소스와 같이 자식 컴포넌트가 1개이거나 몇개 정도의 웹사이트면 괜찮겠지만 보통은 그렇지 않다. 화면 본수가 몇백개는 되는 사이트도 많고 소규모 사이트도 몇십개는 될 것이다. 모든 컴포넌트를 App.js 에 때려박으면 안된다는 얘기다. 아래와 같이 자식 컴포넌트를 자바스크립트로 만들어 본다.

[ChildComponent.js]

import React from 'react';

function ChildComponent(props) {
    return (
    	<>
            <div>
                {props.vals}
            </div>
            <button onClick={ props.changeVals("Value!!") }></button>
            
        </>
    );
}

// ChildComponent로 내보내기!! 
export default ChildComponent;

아까전 App.js 에 적어넣었던 자식컴포넌트() 와 유사한 형태를 띄고 있다. 다음에는 App.js에 추가될 내용이다.

// App.js 최상단에 추가
import ChildComponent from './ChildComponent.js'

ChildComponent.js 에서 ChildComponent를 가져온다는 의미이다. 이렇게 컴포넌트를 분리하면 다른 부모 컴포넌트에서도 가져오는게 가능하다.

// 이런식으로도 사용이 가능하다 굳이 이러지 않아도 되지만...
import ChildComponent1 from './ChildComponent.js'
import ChildComponent2 from './ChildComponent.js'
import ChildComponent3 from './ChildComponent.js'
import ChildComponent4 from './ChildComponent.js'
import ChildComponent5 from './ChildComponent.js'

과한 컴포넌트 분리는 금물

원래 리액트의 철학(프로그래밍의 철학)이 "반복금지" 이다. 그러나 반복을 피하기 위해 컴포넌트를 세밀하게 만들다보면 Component 지옥을 맛보게 될거같다. 마치 DB 정규화 작업과 비슷하달까? 공통 기능 정도만 컴포넌트화 해주고 개별 기능에서의 적당한 반복은 눈감아줘도 될듯 하다.

마치며

다음 포스팅에서는 Context에 대하여 포스팅을 하도록 하겠다.

0개의 댓글