2/21 일일정리 Custom Component 실습

Styled-Component와 StoryBook을 사용하여 Custom Component를 만드는 실습을 진행하였다.

 

1. Modal

주어진 버튼을 누르면 버튼 내부의 문자열이 Opened! 로 바뀌면서 Modal 창이 뜨도록 코드를 구현해보았다.

state 하나를 만들어서 버튼을 누르면 true,false로 변경되도록 삼항 연산자를 사용하여 setState를 변경하는 함수를 만들었다.

이 함수를 버튼 컴포넌트에 onclick 이벤트로 등록한다.

isOpen 변수의 상태에 따라서 버튼 내부의 문자열이 바뀌도록 삼항연산자로 조건부 렌더링을 했다.

 

바로 이어서 만약 isOpen이 true이면 모달창과 모달창 배경이 렌더링 되도록 조건부 렌더링 코드를 작성한다.

모달창 배경을 화면전체로 설정하고 모달창 배경 컴포넌트에 onclick 이벤트를 등록하여 모달창이 떳을 때 화면 내 아무곳이나 클릭하면 다시 isOpen의 상태가 false가 되면서 모달창이 꺼지게 하는 함수 closeModalHandler를 등록한다.

 

Styled-Component로 CSS를 적당히 꾸미면 완성된다.

 

2. Toggle

modal과 마찬가지로 상태 하나를 만들어서 상태에 따라 토글버튼 안쪽의 원을 왼쪽,오른쪽으로 옮기면 된다.

상태의 경우는 true, false로 만들고, 상태가 true이면 class를 추가하여 원의 위치 style을 추가로 적용하면 된다.

토글 컨테이너 컴포넌트에 onclick이벤트로 누를때마다 isOn 상태값이 true, false를 왔다갔다하는 함수를 만들고(modal과 동일) isOn 이 true이면 toggle-checked라는 클래스가 추가되도록 조건부 클래스를 적용했다.

토글 내부 원 스타일에서 기본적으로는 left : 1px 에서 toggle--checked 클래스가 추가되면 left : 27px이 되도록 하여 클릭하면 원이 왼쪽에서 오른쪽으로 이동한다. toggle container의 경우 클릭하면 배경색이 흰색에서 보라색으로 바뀌도록 style을 추가하였다. 그리고 부드러운 전환효과를 위해 transition을 0.2초로 설정했다.

 

토글 버튼 밑에 텍스트도 on/off 상태에 따라 변경되도록 코드를 작성했다.

 

완성본

 

3. Tab

렌더링 해야할 탭과 배열이 주어져 있고, 클릭한 탭에 따라 다르게 렌더링 하면된다.

상태에는 배열의 index를 저장하도록 했다.

 

TabMenu라는 컴포넌트 내부에 li태그로 배열을 렌더링하기 위해 map함수를 사용한다.

각 li 태그는 태그의 이름을 표시한다.(el.name)

현재 탭을 표시해야 하기 때문에 현재 탭에는 focused라는 클래스를 넣어주고 다른 style을 적용해야 한다.

map 함수의 두번째 인자로 index를 받아서 index와 현재 상태인 currentTab이 일치하면 그 li 태그의 클래스에는 focused가 추가하면 된다.

그리고 onclick 이벤트로 상태를 변경하는 함수를 등록할껀데, 클릭하는 태그의 index값을 인자로 넘겨줘야하기 때문에 익명 콜백함수로 감싸서 이벤트핸들러에 인자를 넘기면 클릭할 때 인자가 넘겨진 채로 이벤트핸들러를 불러올 수 있다.

 

이벤트 핸들러는 클릭한 탭의 index로 currentTab의 상태를 변경해준다.

 

그리고 본문으로 현재탭의 content를 보여주면 된다.

 

Styled-Component로 적당한 style을 적용하면 완성된다.

 

4. Tag

Tag 내용들이 들어있는 배열을 상태로 만들어준다. 

초기값은 요소가 문자열 2개인 배열을 넣어주었다.

 

먼저 input 박스에 작성한 문자열을 엔터키를 누르면 태그 등록 이벤트가 발생하도록 input 태그에 onkeyUp 이벤트를 등록한다.

이벤트를 등록할 때 엔터키인지 확인할 수 있도록 조건문으로 event객체의 key 프로퍼티를 확인하여 Enter이면 addTags라는 이벤트핸들러를 동작하도록 코드를 작성했다.

 

addTags 함수는 빈문자열이 넘어올 경우 바로종료하고 tags배열에 같은 문자열이 없는 경우 tags 배열에 input박스에 작성한 문자열(event.target.value)을 추가한다. 그리고 input박스를 초기화한다.

 

이 tags 배열을 map으로 렌더링 한다.

tag-close-icon 클래스가 있는 span 태그는 x버튼으로 누르면 태그가 삭제될 수 있도록 콜백함수를 등록했다. 여기서도 인자를 넘겨줘야 하기 때문에 Tab에서와 마찬가지로 익명 콜백함수로 감싸서 인덱스와 함께 넘겨준다.

* HTML Entities로 ×가 x버튼이다.

 

removeTags 함수는 넘겨받은 index의 tags 배열 요소를 삭제하고 tags 상태를 변경하는 함수이다.

 

완성본

 

 

 

* 실시간 세션 꿀팁!

- position : fixed에 top, bottom, left, right 속성을 0으로 주면 화면 전체로 요소를 늘릴 수 있다.

  modal 창 띄울때 사용

 

- 버블링을 막고싶으면 e.stopPropagation() 메서드 사용

 

- css 에서 계산이 필요할 때 calc() 사용해보기