component 문법
한마디로 HTML을 한 단어로 줄여서 쓸 수 있는 방법이다. 컴포넌트란 UI를 구성하는 재사용 가능한 코드 블록이다. 컴포넌트를 사용하면 애플리케이션을 작은 조각들로 나누어 관리할 수 있어 더 효율적이고 유지보수가 용이해진다.
지금 숫자 기록 코드를 작성해두었는데 모두 APP()에 HTML을 적어두고 한번에 랜더링 해주었다. 이렇게 너무 많은 코드들이 있으면 비슷한 분류의 컴포넌트로 나누어주는게 좋다.
우리가 APP()을 만들어 그 안에 return값으로 JSX문법을 사용해 html을 적어주는 것처럼 다른 태그 묶음도 우리가 원하는 이름의 함수를 만들어서 그 이름의 태그를 사용해주면 되는 것이다. 이제 우리가 태그를 만들 수도 있다.
이렇게 Hello와 Namaste라는 태그를 만들 수도 있고
이런 식으로 Square, Circle라는 태그를 만들수도 있다. 재사용한다는 의미는 이런의미이다. 그저 함수를 만들고 이름 짓고 축약을 원하는 HTML을 넣고 APP()안에 <그 이름 />를 사용하면 된다.
그래서 반복적으로 등장하는 HTML덩어리나 자주 변경되는 HTML UL를 컴포넌트로 만들면 편리해지고 그 부분만 재랜더링해서 기능이 향상된다.
관습으로는
1. 이름은 대문자로 시작
2. return()안에 있는 건 태그 하나로 묶어야하는데
3. 컴포넌트를 만드는 위치는
APP()컴포넌트와 나란히 만들면 된다.
하지만 지역변수와 비슷하게 만든 state또한 그 함수 내에서만 사용할 수 있는 지역변수의 특징을 갖기 때문에 다른 컴포넌트에서 사용할 APP()의 state나 변수를 props문법을 사용해서 그 컴포넌트로 전달해주어야 한다.
props 문법
props란 React컴포넌트에서 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 방법이다. 즉 컴포넌트 간 데이터를 주고 받는 도구라고 생각하면 된다.
기본 사용법은 HTML속성처럼 사용하는데 예를 들어서 설명하겠다.
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Greeting name="Alice" />;
}App()은Greeting()에 name이라는 props를 전달하고
Greeting()은 전달받은 props.name을 사용해 "Hello, Alice!"를 출력한다.
props는 객체로 전달되는데 모든 전달된 데이터가 하나의 객체 안에 담겨서 자식 컴포넌트로 넘어간다는 의미이다. 그래서 데이터 바인딩을 할 때,props.name객체 형식으로 작성하는 것이다.
그래서 구조 분해 할당을 사용, props 객체를 구조 분해하여 더 간결하게 작성할 수 있다.
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
function App() {
return <Greeting name="Alice" />;
}- { name }으로 구조 분해하면 props.name 대신 name으로 바로 접근할 수 있다.
*참고 -> 구조 분해 할당에 대한 내용
여러 개의 props를 전달할 때에는
function UserCard({ name, age, city }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
<p>City: {city}</p>
</div>
);
}
function App() {
return <UserCard name="Bob" age={25} city="New York" />;
}이렇게 여러 속성값을 적듯이 사용한다.
이제 우리가 위에서 만든 숫자 기록 코드를
1. 현재 기록할 숫자를 보여주는 컴포넌트
2. 기록된 숫자를 보여주는 컴포넌트
로 나누어보자.
조금 더 업그레이드해서 기록된 숫자를 보여주는 컴포넌트에서 map()함수로 바꾼 배열의 형태를 하나의 컴포넌트로 분리해보자.
