Warning: Each child in an array or iterator should have a unique "key" prop.
에러의 이유?리엑트는 element가 많을 경우 key값을 주어야합니다. key값은 고유해야합니다.key값이 고유하지 않을 경우 위와 같이 에러가 발생합니다. 해결방법123{movies.map(movie => { return <Movie title={movie.title} poster={movie.p
홈
SVG use
<use><use>태그는 다른 엘리먼트를 참조 할 때 사용합니다. 엘리먼트 내 요소들이 설정되었더라도 참조되는 설정이 바뀌게 되면 바뀐 설정이 적용됩니다. 참조는 xlink:href="#id_name"를 사용하여 링크를 연결합니다.
SVG defs
<defs><defs>요소 내부에서 생성된 객체는 즉시 렌더링되지 않습니다. 랜더링에 영향이 없고 메모리에 저장되어 속도가 빠릅니다. 절대좌표 또는 상대좌표를 사용 할 수 있습니다. 참조하는 곳에 0,0을 작성하고 절대좌표로 작성하면 원하는 곳에 좌표처리가 편합니다. 위 코드와 같이 <g>태그안에 있는 요소들은 랜더링 되지
SVG g
<g>div element와 같은 기능을 한다고 생각하면 됩니다. g에 속한 엘리먼트의 공통 속성을 작성 할 수 있습니다. 각 엘리먼트에 이벤트를 설정하지 않고 <g>에 작성하면 한번에 이벤트 설정이 가능합니다. 시멘틱적으로 하나의 그룹을 만들어 시멘틱을 부여할 때 사용합니다. 위 코드와 같이 <g>안에 모든 stroke는
SVG Polyline
PolylineSVG를 이용하여 꺾은선을 나타낼 수 있습니다. 홈페이지 주식 차트 등 여러 그래프 차트에 사용이 가능합니다. 꺾은선은 선이지만 선 아래쪽을 면으로 인식하여 fill요소를 사용할 수 있습니다. 도형 내부를 체우지 않으려면 fill=none을 사용해야합니다. 속성 이름 값 형태 개요 points <list-of-points>
SVG Polygon
PolygonSVG를 이용하여 다각형을 나타낼 수 있습니다. 속성 이름 값 형태 개요 points <list-of-points> x좌표,y좌표 한 쌍 빈공백 또는 줄바꿈으로 좌표 구분
SVG Ellipse
EllipseSVG를 이용하여 타원형을 그릴 수 있습니다. 속성 이름 값 형태 개요 cx <coordinate> x축 원 중심 좌표 cy <coordinate> y축 원 중심 좌표 rx <length> 반지름 너비 ry <length> 반지름 높이
SVG Circle
CircleSVG를 이용하여 원을 그릴 수 있습니다. 다른 모형에선 좌상단이 좌표의 기준이 되지만 원은 원의 중심이 좌표의 기준이 됩니다. 속성 이름 값 형태 개요 cx <coordinate> x축 원 중심 좌표 cy <coordinate> y축 원 중심 좌표 r <length> 반지름
SVG Rect
RectSVG를 이용하여 사각형을 그릴 수 있습니다. 속성 이름 값 형태 개요 x <coordinate> 좌표 y 좌표 width <length> 폭 heignt 높이 rx 가로 코너 반경 ry 수직 코너 반경 SVG는 만든 순서대로 쌓입니다. 따라서 가장 먼저 SVG를 생성하였다면 가장
SVG Line
LineSVG를 이용하여 선을 그릴 수 있습니다. 속성 이름 개요 x1 x축 시작 좌표 값 y1 y축 시작 좌표 값 x2 x축 끝 좌표 값 y2 y축 끝 좌표 값 stroke(line color)stroke를 사용하여 선의 색상 선의 종류 두께 등 선의 스타일을 지정 할 수 있습니다. stroke를 작성하지 않으면 선이 보이지