reactstrap3 [WEB] React, Controlled Form, form 속성들, react hook multiple states. 강의도 슬슬 3주차입니다. 기초적인 것들은 앞에서 많이 다뤘고, 이제는 모두 다 포스팅하기에는 너무 길어서 제가 기억하고 싶은것만 쓰겠습니다. 강의를 듣고 복습하면서, 한번에 하지 못했던 것들입니다. Controlled Form -> React의 state와 Form의 input value를 일치시키는 것을 말합니다. 공식적 설명으로는, React에 의해서 Input form의 value가 제어되는 것을 말합니다. onChange event를 이용해서 일치시킬 수 있습니다. 이렇게 생긴것을 만드는 과정에서 알게된 것 들을 적겠습니다. Form을 만들기 위해 기본 react 엘리먼트인 input 이런것 대신에 'reactstrap'의 Form을 썼습니다. reactstrap의 { Form.. 2021. 7. 22. [WEB] reactstrap, Breadcrumb 다르게 나오는 이유(version 차이) bootstrap version 극대노의 상황이지만.. 현자의 마음으로 화를 가라앉히고 포스팅 합니다. 하.. 강의 복습을 하는데 몇시간동안 아무리 코드를 고쳐도, UI가 다르길래 원인을 못찾았는데.. bootstrap의 버전이 문제였습니다. reactstrap의 버전이 같더라도 bootstrap의 버전이 다르면 생긴게 다르게 나옵니다.. v 4.0.0 이상 이렇게 나와야 정상인데 V.5.0.0이상 자꾸 이렇게 어디 하자가 있는애처럼 나왔습니다. 원인은 package.json에 있는 bootstrap 버전 차이였습니다. 설마설마 했는데, 이 차이때문에 다르게 나왔습니다. 5.0 이상부터 이런 모양 4.0이상은 이런모양.. 결론 : 패키지의 버전에따른 css 모양도 확인해보자. 몇시간이면 싸게 먹힌걸지도.. .. 2021. 7. 19. [Web]React Component, ReactStrap(react용 bootstrap),export {괄호} 차이, curly braces 보통 웹페이지의 스타일을 만들때 bootstrap을 많이 가져와서 썼죠?? React에서는 부트스트랩을 쓸 수 없습니다. Why? HTML코드에 클래스를 입혀서 만들었는데, 리액트는 html 기반이 아닌 컴포넌트 기반이기 때문이죠 따라서 리액트의 규칙에 맞춰서 부트스트랩을 re-implementation 해야합니다. 하지만!! 이걸 이미 해줬답니다. reactstrap을 설치하시면 됩니다!!! 포스팅 하면서 찾아보니 react-bootstrap 도 있군요.. 아 이게 더 진짜같은데;; 쩝 .. 여기서 리액트 스트랩 쓰니까 저도 씁니다.. npm install bootstrap npm install reactstrap npm install react-popper 위의 3가지를 다운로드 받아주세요.. 2021. 7. 9. 이전 1 다음 728x90
