이벤트4 [220502] styled-component 사용하기 디렉토리의 역할 src component - 공통적으로 들어갈 컴포넌트 모음 hook - 훅에 관련된 내용을 넣는 컴포넌트 pages - 화면에 출력할 영역을 넣음 reducer - reducer 모음 (useReducer가 아닌 redux 관련) store - Context와 같이 전역상태를 만들어주는 디렉토리 컴포넌트별로 기능을 부여할 수 있는 리액트 특성상 디렉토리는 파일 정리 이상의 의미를 가진다. 보통 기능별로 이렇게 디렉토리를 나누니 가이드 삼자. styled-component 설치하기 $ npm install styled-components styled-components 세팅하기 import styled from 'styled-components' styled-components 사용하기 .. 2022. 5. 8. [220414] 리액트에서 이벤트 생성하기 1. 이벤트명은 Camel 형태로 쓰기 html에서 이벤트를 만들때 버튼 리액트에서 이벤트를 만들때는 지정되어있는 함수를 쓸때는 Camel 형태로 사용해야한다. Camel형태로 안 쓰면 실행 자체가 안 된다. class Login extends React.Component{ state = { name:'ingoo2' } render(){ return( {this.state.name} ) } } 2. 이벤트는 익명함수로 감싸기 render() 자체가 내 안에 있는 코드는 모두 실행할게!!라는 함수다. 따라서 onClick함수가 바로 실행되기때문에, 사이트가 렌더되자마자 클릭하기도 전에 알람창이 뜨게된다. 버튼할때 클릭을 하려면 익명함수로 감싸게 되면 된다. 왜? 함수가 호출되지 않으면 실행이 될 수 없기 .. 2022. 4. 16. [220124] input="checkbox" / label / 아코디언 메뉴 input과 연결되는 label See the Pen Untitled by supermint (@ma_ad_shouri) on CodePen. checkbox를 체크 유무를 표시하는 법 관계 없는 둘을 묶어주는 id 체크박스, 라벨과 다른 컨텐츠를 연결하기 id가 app1인 체크박스와 id가 box1, box2인 div와 연결하기 클릭하면 빨간박스 #box1랑 파란박스 #box2가 보이게 만들기 클릭하면 접히는 메뉴 만들기 어떻게 구성할지 생각하기 체크박스 여러개 : 아코디언 메뉴 2022. 1. 24. [220110] queryselector, onload, addEventListener, 호출메서드() 목차 1. querySelector 2. addEventListener 3. onload 4. 호출메서드() document.querySelector(selectors); 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫번째 Element를 반환한다. 일치하는 요소가 없으면 찾지 못한 것이므로 빈 값인 null을 반환한다. selector : 하나 이상의 선택자를 포함한 DOMString. 유효한 CSS 선택자여야만 한다. String과 같은 UTF-16문자열이기때문에 DOMString은 String으로 연결된다. DOMString을 받는 매개변수에 null을 전달하면 보통 문자열로 변환해 "null"이 된다 return : (Object) 제공한 CSS 선택자를 만족하는 첫번째 Element 객체.. 2022. 1. 10. 이전 1 다음
