react (5) 썸네일형 리스트형 [ React ] React Hooks 정리 1 - useState useState 컴포넌트의 상태값 관리를 위해 사용. 유동적인 값을 바인딩 하기 위해 사용 state 변경시마다 컴포넌트는 다시 렌더링된다. 컴포넌트 렌더링의 조건👇🏻👇🏻👇🏻 더보기 1. setState로 state 변경이 있을 때 2. 새로운 props이 들어올 때 3. 부모 컴포넌트가 렌더링 될 때 4. shouldComponentUpdate에서 true가 반환될 때 - 기본값은 true로 보통 렌더링이 일어나지만, 개발자가 false로 리턴값을 변경한 경우는 렌더링 되지않음 5. forceUpdate가 실행될 때 1. 사용 형태 const [ 현재상태값(state) , 현재 상태를 변경할수 있는 함수(setState) ] = useState( 초기값 ) useState는 state와 setState.. [ REACT ] reset css 하는 방법 + npm으로 설치 reset css를 하는 이유 브라우저마다 태그를 렌더링하는 기본 스타일이 다르고, 기본 padding,margin값들 이 적용되어 있는 부분을 초기화 하기위해 style 기본값을 0으로 만들고 list,a태그에 기본적으로 적용된 스타일들의 초기화를 위해 reset css를 해준다. 결론적으로는 크로스 브라우징을 위해 브라우저마다 다른 기본값들에 대한 차이를 없애는것이다 [ 기존에 사용하던 방법 ( css 파일 추가 ) ] https://meyerweb.com/eric/tools/css/reset/index.html /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, .. [ REACT ] 리액트 이해, 렌더링과 Virtual DOM 한동안 뷰만 사용했고, 잠깐 사용했던 리액트 공부를 다시 시작할 예정이라 구매한 책을 싹 처음부터 훑어볼예정입니다. 책보면서 정리하면서 블로그에 올리려고 합니다 : ) 리액트는 라이브러리고, 오직 뷰만 담당한다. 리액트는 프레임워크가 아니라 라이브러리고, 다른 프레임 워크가 라우팅등의 기능을 내장한 반면, 리액트는 오직 뷰만 신경 쓰는 라이브러리로 기타 기능은 라이브러리 등으로 구현해서 사용해야 한다. 그래서 원하는 라이브러리를 선택해서 사용할수 있지만 동시에 여러 라이브러리를 다루어야하는 단점이 있다. 그리고 리액트는 라이브러리기 떄문에 다른 웹 프레임워크나 라이브러리와 혼용해서 사용할 수 있다. 컴포넌트 재사용이 가능한 API로 수많은 기능들을 내장하고 있다. 컴포넌트 하나에서 해당 컴포넌트의 생김새.. [Vue.js #1] 리액트와 뷰의 공통점 Vue는 자바스크립트 기반의 프레임워크 Evan You가 만들었으며, 2014년 릴리즈를 시작으로 꾸준히 발전하고 있는 자바스크립트 프레임워크. 1 반응적이고 조합 가능한 컴포넌트를 제공 React와 Vue 모두, 웹 UI를 작은 컴포넌트 단위로 구성 * 컴포넌트는 다른 프로젝트에서도 재사용할 수 있고, 컴포넌트 캡슐화와 확장이 가능해 개발이 유연해지는 장점이 있다. 2 Virtual DOM 둘다 virtual DOM을 기반으로 하며, tree알고리즘을 통해 변화사항을 찾아낸다. * virtual Dom이 하는 일은 데이터가 업데이트 되면 이전 virtual Dom이랑 비교해서 변경된 부분만 실제 Dom에 적용시킨다 장점 ⇒ Virtual DOM을 통해 렌더를 한 번으로 줄여 효율적으로 HTML을 제어 .. [Meterial-UI] DatePiker Api 모아놓은 곳 input type=month 을 사용해서 YYYY-MM 순으로 날짜를 선택하게 만들어야 하는 부분이 있었다. 아래 사진처럼 년도와 날짜를 선택하는 것인데, 편리하다고 신나서 코딩하다가 무심코 사파리를 켯는데 사파리는 지원이 안되어서 직접 키보드로 입력을 해야했다.. 날짜 중 하나는 빈칸으로 가야하는 점과 , 시작일, 종료일 중 종료일이 시작일보다 앞서면안되고 하는 등의 조건을 걸어주어야하는데, 이렇게 되다보니 모든 조건을 이중으로 걸어줘야해서 material ui로 변경해서 진행하기로 했다. DatePicker API Here you can find the full list and description for DatePicker props. material-ui-pickers.dev material-u.. 이전 1 다음
