1. 예제를 통해서 알아보도록 하자
-- 지금까지 Circle 컴포넌트 하나를 선언했고, bgColor 속성을 이용해 원의 컬러를 설정했다. 그러나 render 메서드에서 Circle 컴포넌트를 사용하는 일에는 약간의 제약이 따른다.
Circle 컴포넌트의 동작에 영향을 주는 데이터를 다루는 경우에는 특히 그렇다
지금 부터는 이문제를 해결하기 위한 방법을 살펴볼 것이다.
2. 어디서든 가능한 JSX - 2
- JSX가 render 함수의 외부에 존재하면서 변수나 속성값으로 사용되는 경우로 봤다.
theCircle 변수에는 Circle 컴포넌트를 인스턴스화 하기 위한 JSX가 담긴다. 이 코드의 경우에는 Circle 컴포넌트의 인스터스화가 render 메소드에서 벋어남으로써 좀더 여러가지 일을 할 수 있게 된다.
ex) Circle 컴포넌트를 리턴하는 함수를 만들수 있다.
3.배열다루기
- 여러 컴포넌트를 보여주고자 할떄 다음과 같이 항상 수작업으로 일일이 컴포넌트를 지정하기는 힘들것이다.
- 현실의 많은 시나리오에서 컴포넌트의 수는 배열이나 그와 같은 계열의 아이템 개수와 관련이 있을 것이다.
- 예를 들어 colors 라고 하는 배열이 있다고 치자
colors = ["#393e41","#e94f37","#1c89bf","#a1d363","#85ffc7","#297373","#ff8552","#a40e4c"]
- 이제 이 배열의 각 아이템에 대한 Circle 컴포넌트를 만들고 각 컴포넌트의 bgColor에 해당 컬러를 설정하려고 한다. 그러게 하러면 Circle컴포넌트의 배열도 만들어야 한다.
- renderData 배열에 Circle 컴포넌트를 채운다 이렇게 채운 rednerData 배열을 화면에 표시해야 하는데 이때는
그냥 중괄호 { } 안에 해당 배열을 넣어주면 된다. { renderData }
- 리액트가 빠르게 UI를 갱신할 수 있는 이유는 DOM에서 일어나는 일을 정확하게 파악하고 있기 때문이다. 그렇게 할 수 있게끔 여러 방법을 사용하는데 그 가운데 주목해야할 한가지는 각 엘리먼트에 일종의 식별자를 부여하는 방법이다
- Circle 예제처럼 동적으로 엘리먼트를 만들 때는 자동으로 식별자가 부여되지 않는다. 따라서 추가적인 작업이 필요하다.
- 그 작업이란 각 컴포넌트를 유일하게 식별하기 위해 사용하는 key 속성을 추가하는 일이다.
위의 for문에서 약간의 수정이 있다
for문에서 각각의 Circle 컴포넌트를 집어 넣을때 key 값을 같이 넣어주면된다. 이렇게 동적으로 컴포넌트가 생성될 때, 리액트가 추후 UI 갱신 최적화에 사용할 유일한 식별자도 함께 만들어진다.
=최종 스크립트=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>From Data to UI</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<style>
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
class Circle extends React.Component{
render(){
var circleStyle = {
padding : 10,
margin : 20,
display : "inline-block",
backgroundColor : this.props.bgColor,
borderRadius : "50%",
width : 100,
height : 100
}
return (
<div style={circleStyle}>
</div>
)
}
}
//var theCircle = <Circle bgColor="#f9c240"/>;
function showCircle() {
var colors = ["#393e41","#e94f37","#1c89bf","#a1d363"];
var ran = Math.floor(Math.random() * colors.length);
console.log(Math.random() * colors.length)
return <Circle bgColor={colors[ran]} />; //무작위로 선택된 컬러의 Circle을 리턴
}
var colors = ["#393e41","#e94f37","#1c89bf","#a1d363","#85ffc7","#297373","#ff8552","#a40e4c"];
var renderData = [];
for( var i = 0; i < colors.length; i++)
{
var color = colors[i];
renderData.push(<Circle key={ i + color } bgColor={colors[i]}/>);
}
var destination = document.querySelector("#container");
ReactDOM.render(
<div>
{renderData}
</div>
, destination
);
</script>
</body>
</html>'dev > React' 카테고리의 다른 글
| [REACT] 컴포넌트 생명주기 (0) | 2022.12.01 |
|---|---|
| [React] 이벤트 (0) | 2022.11.30 |
| [React] 상태 다루기 (0) | 2022.11.30 |
| [REACT] JSX 특징 (0) | 2022.11.30 |
| [React] 속성 전달 (0) | 2022.11.29 |
