[Svelte] 논리문법 each 블록

each 블록

each 블록은 for문과 비슷하다. 

Home폴더 하위에 ColorBox 컴포넌트를 생성해 준다.

<!--./src/Component/Home/ColorBox.svelte-->
<script>
  //props 를 받아옴.
  export let color;
  //props인 color를 chagedColor에 할당.
  let chagedColor = color;
</script>

<div class="color-container">
  <div style="background-color:{color}">{color}</div>
  <div style="background-color:{chagedColor}">{chagedColor}</div>
</div>

<style>
  .color-container {
    margin: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
  }
</style>

<!--./src/Component/Home/Home.svelte-->

<script>
	//ColorBox 컴포넌트를 임포트 해준다.
	import ColorBox from './ColorBox.svelte';
	//사용할 colors 배열
    let colors = [
    {num: 1, color: 'pink'},
    {num: 2, color: 'blue'},
    {num: 3, color: 'red'},
    {num: 4, color: 'green'},
    {num: 5, color: 'yellow'},
    {num: 7, color: 'grey'},
    {num: 8, color: 'purple'},
  ];
  //호출시마다 colors배열의 첫번째 요소를 삭제하는 함수
  function eachBtn() {
    colors = colors.slice(1);
  }
</script>

<div class="colors-container">
  <div>
    <!-- #each 객체 as 객체의 아이템, 인덱스 -->
    {#each colors as color, index}
    <!-- 아이템인 color{num:1, clolor:red}의 color를 props로 넘겨 줌. -->
      <ColorBox color={color.color}  />
    {/each}
  </div>
</div>
<button on:click={eachBtn}>버튼</button>

색상은 핑크, 파랑, 빨강, 초록, 노랑, 회색, 보라 이렇게 8가지가 있다.

ColorBox 컴포넌트에서 props인 color를 보여주는 박스 한개와 color 를 재할당 받은 변수 chagedColor 를 보여주는 박스가 있다.  즉 총 16개의 색상 박스가 보여야한다.

16가지의 박스와 색상들이 잘 보인다!

 

이제 만들어 뒀던 버튼을 이용해 색상을 한개씩 삭제해 보자.

colors배열의 요소가 없어졌을때 each문이 실행되는게 확인된다. 하지만 색상 삭제시 왼쪽과 오른쪽의 다르다.

keyd each 블록

위의 문제는 each블록에서 key값을 설정하지 않아서 그렇다.

Home 컴포넌트의 each블록을 약간 변경해 주자.

<!--./src/Component/Home/Home.svelte-->

<!-- index 뒤에 괄호를 치고 key값을 넣어준다 -->
{#each colors as color, index (color.num)}

unique key

each 블록에서 key값을 설정할때 주의해야 하는점은 유니크한 값(숫자 혹은 문자열, 배열, 객체)이여야 한다는거다.

현재 color배열의 num과 color는 중복값이 없다, 하지만 요소 한개를 추가해서  colors 배열이

<script>
 colors = [{num: 1, color: 'pink'},
            {num: 2, color: 'blue'},
            {num: 3, color: 'red'},
            {num: 4, color: 'green'},
            {num: 5, color: 'yellow'},
            {num: 7, color: 'grey'},
            {num: 8, color: 'purple'},
            {num: 9, color: 'purple'}]
</script>

이렇게 된다면 key값을 num으로 하면 요소의 모든 num 은 다르기 때문에 문제는 없지만 color가 key값이 된다면 오류를 내뱉을 거다.

 

변경한 코드를 실행시켜 보자.

 

each else 블록

만약 저 색상들을 다 지워서 colors배열에 요소가 남아있지 않을때는 어떻게 해야할까?

그냥 빈 화면을 보여줘도 괜찮다, 하지만 다른 상황을 가정해 보자.

서버에서 데이터를 받아와서 화면에 보여줘야 할 때 서버 오류로 인해서 데이터를 받아오지 못 했다.

그경우에도 빈 화면을 보여준다면 해당 페이지 이용자는 로딩이 느리다고 착각 할 수도 있고 그 페이지를 신뢰하지 못 하게 될 수도 있다.

그러니 데이터가 없다는 알림을 보여주는게 좋다.

이럴때 사용하는게 each else블록이다.

<!--./src/Component/Home/Home.svelte-->

<div class="colors-container">
  <div>
    {#each colors as color, index}
      <ColorBox color={color.color}  />
    <!-- :else 블록을 추가해 준다. -->
    {:else}
      남은 color가 없습니다!
    {/each}
  </div>
</div>
<button on:click={eachBtn}>버튼</button>

버튼을 여러번 클릭해서 colors배열의 요소가 없어진다면 "남은 color가 없습니다!" 라는 문구를 보여주겠다.

 

each 블록과 keyd each 블록, each else 블록을 공부해봤다.

아직 많이 익숙하지 않지만 이전에 사용하던 리액트에 비해서 코드가 훨씬 짧아진다는게 느껴진다.

 

개인 기록용입니다. 만약 잘못된 부분이 있다면 댓글로 알려주신다면 감사하겠습니다!