Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[core-elements] slider 컴포넌트를 추가합니다 #459

Closed
appear opened this issue Feb 5, 2020 · 3 comments · Fixed by #464
Closed

[core-elements] slider 컴포넌트를 추가합니다 #459

appear opened this issue Feb 5, 2020 · 3 comments · Fixed by #464
Assignees
@giwan-dev
Labels
core-elements

Comments

@appear
Copy link
Contributor

appear commented Feb 5, 2020 •
edited
Loading

목적

현재 호텔에서 사용하고 있는 slider 의 경우 내부 state 를 바로 변경시켜 한번 움직일때마다
매우 많은 렌더링이되어지고 있습니다.

요것을 별도의 컴포넌트로 가져가고 state 를 slider 내부에서 가져가며
내부 state 에 debounce + useEffect 를 이용하여 변경된 값을 외부에게 전달해준다면
slider 내부에서만 다시 렌더링되기 때문에 (물론 외부전달시 외부 렌더링은 막을 순 없으나 많은 리 렌더 방지차원)
지금처럼 외부에서 많은 렌더링이 일어나지 않을 것 같습니다.

image
@polysiya
Copy link
Contributor

polysiya commented Feb 5, 2020

로그 스케일 적용하는 것도 되면 좋겠어요! 10만~20만에서 조절하기가 너무 까다롭더라구요..

@giwan-dev
Copy link
Contributor

도전해보겠읍니다 🍽

@giwan-dev giwan-dev self-assigned this Feb 5, 2020
@luffy-song
Copy link
Contributor

얘네 로그스케일 구현한 것 같네유.. 인터페이스라도 참고해보시는것도 https://material-ui.com/components/slider/#slider

참고 PR mui/material-ui#19158

giwan-dev added a commit that referenced this issue Feb 6, 2020
@giwan-dev
[#459] Feature: Slider 컴포넌트 구현
9adadc8
giwan-dev added a commit that referenced this issue Feb 6, 2020
@giwan-dev
[#459] Fix: 너무 많은 클래스가 생기는 현상 방지
3d0b955 
styled-componenet prop이 아주 빠르게 변하면서 200개 이상의 클래스가 생성됐다는 경고가 생겼습니다.
해당 경고문에서 권장하는 방법대로 수정하였습니다.
giwan-dev added a commit that referenced this issue Feb 6, 2020
@giwan-dev
[#459] Feature: 비선형 슬라이더 구현
a006c54 
log 스케일은 너무 극단적이어서
e 제곱근 함수를 이용해 스케일링 했습니다.
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Feature: Slider 컴포넌트 구현
a69d94b
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Fix: 너무 많은 클래스가 생기는 현상 방지
3f0bc23 
styled-componenet prop이 아주 빠르게 변하면서 200개 이상의 클래스가 생성됐다는 경고가 생겼습니다.
해당 경고문에서 권장하는 방법대로 수정하였습니다.
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Feature: 비선형 슬라이더 구현
c5ce689 
log 스케일은 너무 극단적이어서
e 제곱근 함수를 이용해 스케일링 했습니다.
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Feature: step도 스케일 함수 적용
4f4b905
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Feature: 값이 최소, 최대 값을 넘지 못하도록 limit 과정 추가
626da50
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Refactor: RangeSlider로 이름 구체화
3fe6ac3
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Feature: SingleSlider 구현
8f6d67c
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Feature: min, max 값 옵셔널 처리
7b98131
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Feature: Slider 최소 조건 story 추가
29ad565
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Chore: 디버깅용 코드 삭제
debc4bd
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Feature: 외부에서 debounceTIme 조절할 수 있도록 수정
c8fdea8
giwan-dev added a commit that referenced this issue Feb 7, 2020
@giwan-dev
[#459] Fix: debouncedHandler 호출이 value만 의존하도록 수정
6a734d6 
debouncedChangeHandler는 조용히 바뀌고 다음 value 변경부터 새로운 핸들러를 사용한다.
value => onChange prop 변경 무한루프 방지
@giwan-dev giwan-dev mentioned this issue Feb 7, 2020
Merged
3 tasks
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Feature: Slider 컴포넌트 구현
a4faa69
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Fix: 너무 많은 클래스가 생기는 현상 방지
561156e 
styled-componenet prop이 아주 빠르게 변하면서 200개 이상의 클래스가 생성됐다는 경고가 생겼습니다.
해당 경고문에서 권장하는 방법대로 수정하였습니다.
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Feature: 비선형 슬라이더 구현
d204727 
log 스케일은 너무 극단적이어서
e 제곱근 함수를 이용해 스케일링 했습니다.
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Feature: step도 스케일 함수 적용
fd94618
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Feature: 값이 최소, 최대 값을 넘지 못하도록 limit 과정 추가
6950c87
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Refactor: RangeSlider로 이름 구체화
a1b4793
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Feature: SingleSlider 구현
85df83c
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Feature: min, max 값 옵셔널 처리
fed605a
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Feature: Slider 최소 조건 story 추가
675972d
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Chore: 디버깅용 코드 삭제
10cd307
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Feature: 외부에서 debounceTIme 조절할 수 있도록 수정
d1eacba
giwan-dev added a commit that referenced this issue Feb 10, 2020
@giwan-dev
[#459] Fix: debouncedHandler 호출이 value만 의존하도록 수정
78c26d1 
debouncedChangeHandler는 조용히 바뀌고 다음 value 변경부터 새로운 핸들러를 사용한다.
value => onChange prop 변경 무한루프 방지
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@giwan-dev giwan-dev

Labels
core-elements
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

slider 패키지 추가 titicacadev/triple-frontend
4 participants
@polysiya @giwan-dev @appear @luffy-song