props와 state는 리액트의 전부라고 해도 과언이 아니라는 은국썜의 말이 문득 떠오른다. state가 변하면 랜더링되고, 랜더링이 된다면 무조건 state를 확인하라는 은국쌤의 말,,
그래서 다시 Props와 State의 개념을 잡아보려고 한다.
Component란?
컴포넌트는 컴퓨터 소프트웨어에 있어서, 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 일컫는다.
리액트에서 컴포넌트는 class형, function형으로 나뉜다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
컴포넌트가 재사용성과 범용성을 가지기 위해서는 관심사에 따라 딱 한가지의 역활만 수행시키기를 권장한다. (객체지향 : 단일 책임 원칙) 리액트 컴포넌트는 단순하게 보면 props를 받아서 DOM 렌더를 시키는 JSX를 리턴하는 함수이다. 동일한 props를 받으면 같은 JSX 리턴하는 순수함수로 이뤄져야 한다.
//class형
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
//function 형
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}Component 랜더링
function User(props){
return <h1> Welcome ! {props.user} </h1>
}
const element= <User user="eunsu" />
const rootElement = document.getElementById("root");
ReactDOM.render(
element
,
rootElement
);
<User user="eunsu" />엘리먼트로 ReactDOM.render()호출- {user:eunsu} props로 전달 User function 호출
- User함수의 반환값으로
<h1>Welcome! eunsu</h1>반환- React.DOM에 랜더링되서 index.html에 출력
컴포넌트 합성
합성이란?
서로다른 객체를 여러개 붙여서 새로운 기능이나 객체를 구성.
일반적으로 합성 할 클래스를 변수에 할당 후 사용하는 구조.
이렇게 합성 한 경우, 상속과는 다르게 클래스간의 유기적으로 서로의 클래스를 융통성있게 합성 할 수 있다.
리액트에서 상속과 합성 중 무엇을 선택해야 할까?
- 자식 클래스를 사용해야 하는 곳에 부모 클래스를 사용할 수 있다면 상속으로 제작
- 클래스가 단지 다른 클래스의 서비스만을 이용한다면 합성으로 제작
- 새로 디자인 하려는 클래스가 기존 클래스와 유사한 형태라면 상속으로 제작
출처: https://blog.sonim1.com/186 [Kendrick's Blog]
컴포넌트에서 다른 컴포넌트를 담기
어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있다. 그럴경우 props.children을 사용해서 children의 내용을 처리 할 수 있다.function Children1() {
return (
<div className="children1">
<div>2</div>
</div>
);
}
function Children2() {
return (
<div>
<div>3</div>
</div>
);
}
function Children3() {
return (
<div>
<div>4</div>
</div>
);
}
function Parents(children){
return(
<div>
<div>1</div>
{children}
<div>5</div>
</div>
)
}
exports default function App(){
return(
<Parents>
<p>3</p>
<Parents>
)
}이거 이해하는게 시간이 엄청 많이 걸린것같다,,ㅎㅎㅎㅎ 근데 이해했음. 가끔 컴포넌트 안에 JSX가 들어올지, component가 들어올 지 잘 모르는 경우가 있다. 음.. 내식으로 풀어서 정의하면 컴포넌트에서 {children}으로 정의를 하면, 그 안에서 JSX를 사용해도 되고, 컴포넌트를 만들어도 된다.
그러니까
컴포넌트를 참조해서 무언가를 처리하려고 할 때, 사용하면 된다.
다시 예시를 하나 들면.
*Box.jsx
import BoxItems from "./BoxItems";
export default function Box() {
const user = [
{
name: "Judy",
age: 15,
gender: "female"
},
{
name: "Holy",
age: 23,
gender: "male"
}
];
return (
<>
<BoxItems>
{user.map((item) => (
<>
<p>Name: {item.name} </p>
<p> Age: {item.age} </p>
</>
))}
</BoxItems>
</>
);
}*BoxItems.jsx
const BoxItems= ({children}) => {
return (
<div>
<h1>Welcome to World!</h1>
{children}
</div>
)
}
export default BoxItems;자식컴포넌트인 BoxItems.jsx에서 처리할 일들을 {children} 처리를 해주고, 그 일을 부모컴포넌트인 Box.jsx에서 처리해 주면 됨. 하지만 이건 상속이 아닌 합성이 됨.
그 이유는 props를 전달하는 것이 아니라, 부모 컴포넌트에서 처리 하는 것이기 때문에! (이건 내 생각임..) 이해가서 넘 기쁘다 ㅎㅎㅎㅎㅎ
그럼 랜더링은 어떻게 일어날까??
리랜더링은! state가 변할 경우, props로 전달해줄때 일어난다. 내가 작성한 코드는 state를 사용해 데이터를 담지 않았기 때문에 리랜더링이 일어나지 않는다. 다른코드에서 또한, 합성이라고 말하며 상속하지 않으므로 state를 props로 전달하지 않는 이상 리랜더링이 일어나지 않는다.
