모든 일에 의문을 제기하고 그 의문을 해결하기 위해 지식을 구하고 공부

1. state을 선언한다. const [accessAllCheckBox, setaccessAllCheckBox] = useState(false) 2. input의 checked 속성에 state을 부여한다. 3. input에 onClick or onChange 이벤트로 체크 이벤트를 실행한다. onClick={agreeCheckedHandle1} const agreeCheckedHandle1=()=>{ setaccessCheckBox1(!accessCheckBox1) }

window.onload = function() {} : 웹페이지의 로딩이 끝나는 시점에 javascript문이 실행되도록 하는 함수다. : 특히 React에서는 onload문을 사용해줘야 한다.

1. React에서 제공하는 Form 이벤트 1) onChange 2) onInput (textarea, input 요소값이 변경될 때 사용됨 > react팀에서는 이 이벤트 사용을 추천하지 않음) 3) onSubmit 2. Form 속성 1) action : submit된 후 수행되는 조치 (특정 엔드포인트, 웹페이지로 이동 가능) ex. 2) method : form 데이터를 제출할 때 사용할 HTTP 메소드 지정 ex. 3. 변경 가능한 속성 (interative properties) 1) value : input, textarea, select 태그에서 사용 2) checked : input태그의 checkbox, radio type 3) selected : select, option 4. pre..

**체크박스를 직접적으로 꾸미는 것은 어렵다. 따라서, 체크박스와 연결된 '라벨'을 만들어 꾸민다. (라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질 이용) 1. 체크박스 만들기 : for 속성 이용 > 체크박스-라벨 연결 ★★★ react에서는 for 대신 'htmlFor'을 사용할 것 2. 라벨 꾸미기 input[id="cb1"] + label { display: inline-block; width: 20px; height: 20px; border: 2px solid #bcbcbc; cursor: pointer; } 3. click 시 라벨 꾸미기 input[id="cb1"]:checked + label { background-color: #666666; } **hover >..

import * as React from "react"; import * as ReactDOM from "react-dom"; import EasingAnimation from "../../../src"; // Bar component (wrapped component) interface IBarProps { currentValue: number; } class Bar extends React.Component { public static defaultProps: IBarProps = { currentValue: 0, }; public render() { const { currentValue } = this.props; const rounded = Math.round(currentValue); const..

1. react-slick 설치 : npm install react-slick --save 2. 홈페이지에서 Example을 참고한다. 3. hooks 형 예시 import React from "react"; import Slider from "react-slick"; function Visual() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( Single Item 1 2 3 ); } 참고사이트 : react-slick 홈페이지 https://react-slick.neostack.com/docs/get-started/