Web29 React | number count 기능 구현하기 , onScroll 스크롤에 따라 animation 실행 먼저 react-spring을 사용해서 숫자 Count 애니메이션을 구현할 것이다. react-spring은 React에서 여러 애니메이션을 구현하기 위해 사용하는 애니메이션이며 이를 사용하기 위해서는 npm을 통해 설치해야 한다. https://www.react-spring.io/ react-spring Bring your components to life with simple spring animation primitives for React www.react-spring.io 사용하는 방법은 간단하다. import { Spring } from 'react-spring/renderprops'; {props => {props.number}} 내가 사용한 코드는 다음과 같다. 0부터 43109까지 Cou.. 2020. 8. 3. React: Webpack 설치, 환경설정 및 빌드 # 웹팩 설치하기 웹팩을 왜쓸까? -실제 개발환경에서 component를 여러개를 사용해야 한다. -컴포넌트마다 script를 사용하면 너무 길어져서 유지보수가 불가능하다. -여러개의 js 파일을 한번에 합쳐서 한개의 js파일로 만드는 기술이 웹팩이다. -합치면서 바벨적용 + 쓸모없는 코드 제거가 가능하다. *React에서 node가 필요한 이유 -자바 스크립트 실행기가 필요해서 -웹팩을 돌리기 위해서 사용하는 순서 npm init npm i react react-dom npm i -D webpack webpack-cli npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader @babel/plugin-proposal-class-pr.. 2020. 7. 28. React : Hooks 사용. (Class와의 차이점) useState, useEffect Hook을 쓰는 이유!? class를 쓰지말고 함수로, 함수 컴포넌트에서도 state랑 ref를 쓰기 위해 만든 것. const GuGuDan = () => { //state 선언시 함수 안에다가 써야한다. //use로 시작하면 hooks다. //비구조화 할당(= 구조 분해 할당 방식) const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = React.useState( Math.ceil(Math.random() * 9) ); const [value, setValue] = React.useState(""); const [result, setResult] = React.useState(.. 2020. 7. 28. React : 구구단 예시 (State, setState) 구구단 게임 만들기 State 사용하는곳 찾기 이 구구단 게임에서 입력을 누를때 바뀌는곳은 첫줄의 숫자들, 입력창, 결과창(땡,정답) 총 3곳이 바뀌게 된다. 따라서 State는 3개이다. setState를 통해 상태가 변경시킬 수 있다. onChange를 통해서 입력을 받은 값(상태)을 value에 저장시킬 수 있고 onSubmit을 통해서 정답을 맞출때, 맞추지 못할때에 따라서 state를 변화시켜서 화면에 출력시킨다. *참고 render()에서 는 의미없이 한번을 묶어주는 역할을 하는데 이를 로 빈 칸으로 만들어도 된다. setState에서 현재 값 구분해주기. this.setState((Current) => { return { result: "정답!! " + Current.value, first:.. 2020. 7. 27. 이전 1 ··· 3 4 5 6 7 8 다음
