분류 전체보기60 [React] Styled-Components 스타일 컴포넌트 ※ 버전에 따라 사용법이 조금 다르다보니 공식문서를 참고하는 편이 가장 좋다. 공식문서 : https://styled-components.com/docs 스타일 컴포넌트 렌더 import styled, { css } from 'styled-components'; 1. 기본 사용 const Container = styled.div` background: #ffeaa7; `; function Test() { return ( ); } 2. SASS(SCSS)의 중첩 사용과 props 사용 function Test() { return ( green pink ); } const Button = styled.button` width: 100px; height: 50px; border-radius: .. 2020. 6. 11. [React] Hook, State 클래스 컴포넌트와 함수 컴포넌트 리액트 컴포넌트 에서 props 데이터만 다룬다면 함수형 컴포넌트를 사용 할 수 있다. Hook 도입 이전(react v16.8미만) 에는 컴포넌트에서 state, 생명주기(life cycle)를 다루려면 반드시 클래스 문법을 사용 해야했다. 함수 컴포넌트(function component) function Test() { return ( test ); } //또는 const Test = () => { return ( test ); } 클래스 컴포넌트(class component) class Test extends Component { render() { return ( test ); } } 개념적으로 React 컴포넌트는 함수형에 더 가깝다고 한다. 친절한 리액트 개발진.. 2020. 6. 11. [React] JSX, Props JSX / 컴포넌트 컴포넌트는 html을 반환하는 함수. xml이나 html생겼지만 javascript 다. jsx는 리액트 컴포넌트다. 대문자로 시작한다. 커스텀 컴포넌트 생성 프로젝트 폴더 프로젝트명/src/컴포넌트파일명.js 로 컴포넌트 파일 생성한다. 컴포넌트명 첫글자는 대문자로 작성하자. 예) 프로젝트폴더/src/First.js 생성 First.js import React from 'react'; // 컴포넌트 생성시 무조건 써주자 function First() { // 컴포넌트 명 앞은 대문자 return ( // 반환 될 html을 작성 First text ); } export default First //export 해주어야 jsx가 인식한다. 생성한 컴포넌트는 index.js 에서 렌더해.. 2020. 6. 11. [javascript]이벤트 위임(event delegation) JS 이벤트 위임 left right 위와 같은 DOM구조에서 각 버튼 클릭시 이벤트가 발생하길 원할 때 const btns = document.querySelectorAll('.btn'); function btnClick(){ console.log(this); } for(let i = 0; i < btns.length; i++){ btns[i].addEventListener("click", btnClick); } //for문이 싫다면 btns[0].addEventListener("click", btnClick); btns[1].addEventListener("click", btnClick); ... 위 코드처럼 각 버튼에 이벤트리스너를 달아주면 된다. 하지만 위 처럼 버튼이 조금밖에 없는.. 2020. 6. 11. [JS - Plugin] Scroll Masic 라이센스 : [MIT] License 공식문서 : http://scrollmagic.io/docs ScrollMagic Documentation Quicklinks: About | Download | Installation | Usage | Help | Compatibility | Author | License | Thanks ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll scrollmagic.io 한눈에 보는 Cheat Sheet 스크롤매직을 제대로 활용하려면 doc문서를 참고.. 2019. 12. 13. [javascript] 이벤트 핸들러 1번만 적용하고 제거하기 기본적인 이벤트 핸들러의 선언 및 제거방법 //실행 될 이벤트 function test(){} 이벤트 핸들러 선언 element.addEventListener("click", test); 이벤트 핸들러 제거 element.removeEventListener("click", test); 익명함수를 콜백으로 쓰게 될 경우엔 element.addEventListener("click", function(){ test(); // 선언한 클릭이벤트가 전부 제거 되어버림 this.removeEventListener("click"); // arguments.callee 를 사용하면 원하는 이벤트만 제거 this.removeEventListener("click",arguments.callee); }); 활용 예) 비디오.. 2019. 12. 12. 이전 1 2 3 4 5 ··· 10 다음
