Coding/React34 React - flicking 많은 웹사이트를 보면 배너가 있고 버튼을 누르거나, 배너 navigator(?) 같은거를 누르면 배너가 이동을 한다. React에서 이러한 기능을 해주는 라이브러리가 있다. flicking이라는 라이브러리다. npm 사이트에서 flicking이라고 검색을 하면 flicking에 관련된 많은 라이브러리가 나온다. React를 사용했기 때문에 하기와 같은 라이브러리를 설치를 했다. npm install --save @egjs/react-flicking flicking에 대한 많은 property들은 공식 사이트에 나와있다. 설명이 잘되어 있다 @egjs/react-flicking : "^3.5.2" naver.github.io/egjs-flicking/release/latest/doc/index.html I.. 2021. 2. 21. React - Next - Material ui Warning: Prop className did not match Warning: Prop className did not match Next js에 Material ui를 setting 할 때, 문제점이 발생했다. 처음 켤때는 아무런 문제가 없지만 새로고침을 하거나 다른 페이지를 이동하동 하다보면 콘솔에 위와 같은 message가 발생한다. 이것을 해결하고자 google을 열심히 뒤져서 해결을 할 수 있었다. 우선 먼저 찾아 볼수 있는 페이지는 Material ui 공식문서 사이트 이다. 여기서 이문제가 왜 발생하고 있는지 잘 설명되어 있다. material-ui.com/guides/server-rendering/ Server Rendering - Material-UI The most common use case for server-side rendering is t.. 2021. 2. 14. React - Phone book 만들기(마무리) 데이터를 생성 삭제 수정 기능까지 구현을 했다. 만약 데이터 양이 많아서 원하는 데이터를 찾기가 어려우면?? 검색기능이 있으면 될것같다. App.js에서 검색하면 글자들을 담을 수 있는 keyword라는 state를 만들었다. 그리고 handleSearch라는 함수를 만들고 변화되는 값을 keyword에 넣었다. 형태를 나타내는 코드는 PhoneForm에 작성을 했기 때문에 PhoneForm에 검색창을 만들었다. 그리고 검색창에서 들어오는 값을 handleSearch에서 받아 주어야 하기 때문에 statelift로 전달을 하면 된다. 검색하는 창이 구현이 되었고, 검색한 것이 잘 전달 되는지 확인을 하면 input 값이 잘 출력 되는것을 확인. input값을 받아오고 그 값을 기존에 있는 informat.. 2020. 8. 9. React - Phone book 만들기(6) data를 수정하는 기능을 넣으려고 하는데 이전까지 phonelist를 함수형으로 진행했는데, 수정하는 기능은 toggle형태가 필요하고, state 값을 바꿔야 하기때문에 함수형을 class형으로 변환해야한다. 이전까지 작성한 return 이하를 복사해서 class를만들고 render안에 리턴값을 붙여넣는다. 그리고 data를 상속받는 형태로 바꿔준다. 그리고 onUpdate라는 함수를 App.js에서부터 받아올것이다. handleUpdate 함수를 만들고 자식 component를 전달한다. setState는 data(information)에 있는 값들의 id와 같으면 새로운 객체에 기존 데이터 ...list(information) 값에 ...data(phonelist에서 받아오는) 값을 덮어 씌운다... 2020. 8. 8. 이전 1 ··· 3 4 5 6 7 8 9 다음 반응형
