뇌 채우기 공간

출처: 스파르타 코딩 클럽 꼬미 사진을 스와이프해서 o나 x에 갖다 놓으면 다음 문제로 넘어가는 코드 App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 import logo from './logo.svg'; import './App.css'; import React from "react"; import Start from "./Start"; import Quiz from "./Quiz"; import Score from "./Score"; class App extends ..

2021.06.27 - [WEB/REACT] - [REACT] 클래스형 컴포넌트에서 state관리 - setState /네모를 하나 추가 하나빼기 화면 만들기 네모근처에 마우스 올리면 백그라운드 색상 바뀌게 하기 (1) ref설정 만들어서 연결해준다. (2) 이벤트 함수 설정 이벤트의 타겟에다가 어떤 코드를 실행할지 (3) 이벤트 리스너 구독과 해제 DOM객체가 다 만들어지고 나서 이벤트 리스너 등록하고 DOM이 사라지면 해제하도록 함 App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 import React from "react"; import Nemo from..

버킷리스트에 input에 넣은 텍스트를 추가하기 BucketList.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 // 리액트 패키지를 불러옵니다. import React from 'react'; import styled from "styled-components"; const BucketList = (props) => { // 부모의 state에 있는 list 를 가져온다. const my_lists = props.list; console.log(props); // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다. r..

함수형 컴포넌트에서 state관리 - useState() 함수형 컴포넌트는 state가 없다고 말씀드렸었죠? 맞아요. 함수형 컴포넌트는 state가 없지만 react hooks를 사용하면 state를 가질 수 있습니다! 순서 (1) Nemo 컴포넌트 만들기 클래스형에서는 App.js에서 직접 만들었지만 네모라는 컴포넌트를 따로 만들어서 App.js에서 불러온다. (2) App에서 불러오기 import를 해주고 원하는 render에서 리턴할때 네모를 불러온다. (3) useState()로 count를 state로 등록하자 (4) 뷰를 만든다. (반환할 리액트 요소) (5) 함수를 만들고 버튼에 연결한다. App.js import React from "react"; import Nemo from "./Nem..

▶ 단반향 데이터 흐름 - 데이터는 부모에서 자식으로만 넘겨준다. 왜? - 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다. - 만약 부모 컴포넌트가 변해서 자식이 변해서 그것이 또 부모에게 넘어가면 계속 리렌더링된다. ▶ setState() 클래스형 컴포넌트의 state를 업데이트할때 사용하는 함수이다. (1) 새 CRA만들기 yarn create react-app nemo (2) index.js에서 부분을 지우기 (3) App.js를 class형 컴포넌트로 바꾸고 시작 // App component를 class형으로! import React from 'react'; class App extends React.Component { constructor(props){ sup..