React로 개발하기!

저번 글에서, React 개발환경 세팅까지 다뤄보았다. 이제 본격적으로 React를 사용해 보자!

React 개발하기

React에서 가장 중요하고, 강력한 기능은 무엇일까?

💡 바로! component기능이라 할 수 있을 것 같다

 

코드를 작성할 때 같은 기능을 하는 코드를 중복되게 작성하는 경우 만약 그 코드가 10,000번 필요하다면 똑같은 코드를 10,000 번 작성해야 한다….(수정할 때도 10,000번???🥶)

react에서는 component를 만들어 같은 기능을 하는 코드라면 딱 하나의 함수 안에 만들어 놓고, 다음부터는 그 component만 불러오면 된다. 결국 가독성이 매우 좋아지며, 유지보수의 편의성 또한 좋아진다.

한마디로 작은 단위의 부품들을 만들어 필요할 때마다 조립해 쓰는 콘셉트로 이해하면 좋다.

function App() {
	return(
		<>
			<h1>Counter</h1>
			<button>+</button>👉🏻10
			<h1>Counter</h1>
			<button>+</button>👉🏻10       //10,000번 작성할것을....
			<h1>Counter</h1>
			<button>+</button>👉🏻10
              .
              .
              . 
		</>
	)
}
-----------------------------------------------------------------------------
//components에 만들고
function Counter(){
	return (
		<>
			<h1>Counter</h1>
			<button>+</button>👉🏻10
		</>
	)
}

function App() {             
	return(
		<>
		<Counter></Counter>         //이렇게 불러오면 끝!
		</>
	)
}

React에서 컴포넌트를 생성하고, 컴포넌트의 데이터를 각각 달리 입력하고 싶을 때는 어떻게 할까? props를 이용하면 된다.

Props는 컴포넌트에 데이터를 전달하는 방법이고, 전달된 후에는 변수를 통하여 접근할 수 있다. HTML의 속성과 비교하여 생각하면 이해가 쉽다. props는 단방향으로 부모 컴포넌트에서 자식 컴포넌트로 내려간다.

그림으로 이해해 보자면, 아래와 같이 생각하면 조금 쉽다.

function Counter({title, initValue}) {     //prpos로 title,initValue를 작성 (구조분해할당 방식)       
	return (
		<>
			<h1>{title}</h1>
			<button>+</button> 👉🏻 {initValue}
		</>
	)
}

function App() {             
	return(
		<>
		<Counter title="중간고사 카운터" initValue={10}></Counter>         
		<Counter title="기말고사 카운터" initValue={20}></Counter>         
		</>
	)
}

위의 코드의 결과물을 확인할 수 있다. 다음 글에서는 매우 매우 중요한 State를 정리해 보자!