250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 리액트 메모이제이션
- 실행컨텍스트
- 리액트 렌더링 최적화
- 웹 크롤링
- gql restapi 차이
- 렌더링 최적화
- 타입스크립트
- 웹팩 기본개념
- 항해99 미니프로젝트
- 알고리즘
- JS module system
- toggle-btn
- Js module
- chromatic error
- js배열 알고리즘
- 리덕스
- v8 원리
- 항해99 부트캠프
- 코어자바스크립트
- 리액트 메모
- jwt
- next js
- 자바스크립트 엔진 v8
- 함수형 프로그래밍 특징
- 항해99
- this
- 테스트 코드 툴 비교
- 항해99 사전스터디
- 리액트
- FP 특징
Archives
- Today
- Total
목록UI (1)
Jaeilit
토글버튼 만들어보기
이 토글 버튼 UI는 처음엔 a,b 두개로만 동작을 해서 정말 토글버튼이였습니다만 리스트 갯수를 2개에서 더 많은 갯수로 늘려 다양하게 활용처에 사용하고싶은 마음에 코드를 수정한 결과 이런 결과물이 나왔습니다. 사실 토글버튼 보다 nav 버튼에 가깝지 않을까 싶지만 적당한 명칭을 정하지 못하여 최초의 이름인 토글로 지정하였습니다.구조컴포넌트마다 독립적인 구조를 위해서 폴더마다 tsx, hooks, provider, css, types 파일을 가지도록 했습니다.📦components ┗ 📂toggle ┃ ┣ 📜hooks.ts ┃ ┣ 📜index.tsx ┃ ┣ 📜provider.tsx ┃ ┣ 📜styles.module.css ┃ ┗ 📜type.ts - tsx: view 담당- hooks: 로직 담..
TIL
2024. 6. 20. 01:53