안녕하세요 @realmankwon입니다. 3일동안 포스팅을 하지 못했네요 ㅜㅜ 시간이 없어서도 있지만 이번 건은 보기에는 엄청 쉬워 보이지만 실제로 해 보니 너무나 어려워서 3일동안에 걸쳐서 겨우 해냈습니다. 이제 글 한개 쓰는 것이 얼마나 어려운지 실감이 되네요. 코인에 대해서 잘 모르고 좋은 글을 쓸려면 많은 시간을 들려야 하는데 그 시간에 제가 좀 더 잘 하고 도움이 될 수 있는 글을 써야겠다는 생각에 기존에 잡글은 쓰지 않았습니다. ![](https://cdn.steemitimages.com/DQmRqbPEH4gNTKrHcYSNuJRdaKazcVgxVQEDyMRfs6GFWUQ/image.png) 일단 오늘은 제목과 같이 보팅시에 간편하게 고정값을 추가했습니다. Busy, Steempeak에서는 기본으로 되어있고 너무나 편하게 써서 저도 여러모로 불편했었습니다. 그래서 쉽겠거니라며 수정에 들어갔는데 이거 정말 어려웠습니다. ㅜㅜ 잘하시는 분들은 쉬웠을텐데 저는 잘 모르다보니 생각보다 분석도 많이해야했고 react 문법도 제법 많이 공부해야했습니다. 일단 slider와 관련된 소스를 찾아보았습니다. 이전과 마찬가지로 다음의 Voting.jsx 파일에 있었습니다. >src/app/components/elements/Voting.jsx ![](https://cdn.steemitimages.com/DQmSvDz84ktfifJJL8hcnUHZBu7zw5LEephnhyEB5fumz3e/image.png) 위의 소스에서 {s + b / 100}% 이 보팅 비율이고 < Slider min={100} max={MAX_WEIGHT} step={100} value={b} onChange={this.handleWeightChange(up)} onChangeComplete={this.storeSliderWeight(up)} tooltip={false} /> 이 보팅바 부분입니다. 보팅바 부분의 소스에서 보팅바를 변경하면 this.handleWeightChange(up) 이 호출되고 보팅바 변경 후 마우스를 놓으면 this.storeSliderWeight(up) 이 호출됨을 알 수 있습니다. 이때 이 함수를 이용해서 뭔가를 해 볼려고 했었는데 저 함수를 어떻게 사용하는지 react의 문법을 모르니 알 수가 없었습니다. 그래서 react에서 함수를 어떻게 선언하는지 며칠동안 공부를 했습니다만 실제 소스에 있는 모습대로 사용된 것은 볼 수가 없었습니다. this.handleWeightChange = up => weight => { let w; if (up) { w = { up: weight, down: this.state.sliderWeight.down, }; } else { w = { up: this.state.sliderWeight.up, down: weight, }; } this.setState({ sliderWeight: w }); }; 여기서 이 부분 >this.handleWeightChange = up => weight => { 선언될 때 = 뒷부분은 인자 => 뒷부분은 함수 선언이라고 했는데 여기서는 => 뒤에 변수가 나오고 다시 => 이 나오는 것입니다. ㅜㅜ 그래서 소스를 더 밑에 까지 까보았습니다. 다음과 같이 되어 있더군요. ![](https://cdn.steemitimages.com/DQmYfGGg6ucaMF9wnZiGdwvyuDr6HtD6HK6iqgRpwSJtC4J/image.png) 저기서 보면 onChange 함수는 value : number 값을 받는다고 되어 있습니다. 음.... 며칠동안 고생했었는데 오늘 유추를 해 보았습니다. 함수 연결시에 () 안의 인수는 = 바로 뒤의 변수에 입력이 되고 => 뒤에 변수에는 기본 value : number 값을 받는다고... 그 후에 다음과 같이 소스를 변경하였습니다. radio 버튼으로 값을 입력받도록 하고 위의 onChange, onChangeComplete 함수를 합쳐서 handleButtonWeightChange 함수를 만들었습니다. const slider = up => { const b = up ? this.state.sliderWeight.up : this.state.sliderWeight.down; const s = up ? '' : '-'; return (

{s + b / 100}%

// 보팅 고정값 추가 버튼

); }; // 버튼 클릭시 보팅바와 보팅비율 변경하는 함수 생성 this.handleButtonWeightChange=(up, weight)=>e => { let w; if (up) { w = { up: weight, down: this.state.sliderWeight.down, }; } else { w = { up: this.state.sliderWeight.up, down: weight, }; } this.setState({ sliderWeight: w }); const { username, is_comment } = this.props; console.log(username); localStorage.setItem( 'voteWeight' + (up ? '' : 'Down') + '-' + username + (is_comment ? '-comment' : ''), weight ); }; 그 이후 실행을 하였더니 정상적으로 동작을 하였습니다. ![2019-06-06 22.36.53.gif](https://cdn.steemitimages.com/DQmbWZKoQZEmP3rhEPJNXkXrU7fdQqqeHuaWU4rqegD8ST5/2019-06-06%2022.36.53.gif) 고정값 클릭도 잘 되고 보팅까지 잘 되었습니다. 마지막에 보팅된 것이 깔끔하게 캡쳐가 안 되었지만요 ^^ 암튼 이번에 react에 대해서 좀 더 많이 공부할 수 있는 계기가 되었네요. 앞으로 점점 더 어려운 것들을 하게 될텐데 글을 얼마만에 한번씩 쓸 수 있을지 모르겠네요ㅜㅜ 차라리 코인을 더 공부해서 쓰는 것이 더 나을 것 같기도 하다는 생각이 불쑥드네요. 암튼 이 소스도 적용이 되길 바래봅니다. ^^ 다들 남은 휴일 잘 보내세요!!! # * 이전글 [Intro 내 컴퓨터에서 나만의 sct를 실행해 보자](https://www.steemcoinpan.com/sct/@realmankwon/weedcash-sct) [1. [나만의 SCT #1] 보팅 비율 보기](https://www.steemcoinpan.com/sct/@realmankwon/sct-1) [2. [나만의 SCT #2] SCT 보상액과 Steem 보상액 함께 보기](https://www.steemcoinpan.com/sct/@realmankwon/sct-2-sct-steem) [3. [나만의 SCT #3] 보팅 금액 (SCT), 글 리스트에서 보팅자 확인, 보팅자 Limit 풀기](https://www.steemcoinpan.com/sct/@realmankwon/sct-3-sct-limit)