뇌 채우기 공간

출처: 스파르타 코딩 클럽 꼬미 사진을 스와이프해서 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..

■ 가상돔이란? DOM은 html단위를 하나하나 객체로 생각하는 모델이다. 예를 들면 div태그라는 객체는 텍스트 노드, 자식 노드, 등등 하위의 어떤 값을 가지고 있는 구조 이런 구조를 트리 구조라고 한다. DOM트리 중 하나에서 수정이 일어날때마다 모든 DOM을 뒤지고 수정할 것을 찾아서 싹 수정을 하면 필요없는 연산이 너무 많이 일어나기 때문에 가상돔이 등장했다! 기존 DOM과 어떤 행동 후 새로그린 DOM을 비교해서 바뀐 부분만 갈아끼워준다. 돔 업데이트 처리가 간결하다!! ■ 라이프 사이클이란? 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질때까지 컴포넌트는 생성되고-> 수정되고-> 사라진다. 생성: 처음으로 컴포넌트를 불러오는 단계 수정: 사용자의 행동으로 데이터가 바뀌거나, 부모 컴..

styled-components를 사용하기 터미널에서 yarn add styled-components로 패키지를 설치해준다. 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 55 56 57 58 59 import React from 'react'; import logo from './logo.svg'; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList fro..

코드를 확인하자! 더보기 App.js import React from "react"; import logo from './logo.svg'; import './style.css'; import Start from "./Start"; class App extends React.Component{ constructor(props){ super(props); this.state = { name: "꼬미" }; } render () { return ( ) } } export default App; Start.js import React from 'react'; import img from "./scc_img.jpg"; const Start = (props) => { console.log(props); // 컴포..

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 import React from 'react'; import logo from './logo.svg'; import './App.css'; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList from './BucketList'; // 클래스형 컴포넌트는 이렇게 생겼습니다! class App extends React.Component { constructor(props){ super(props); // App 컴포넌트의 state를 정..

■ 함수형 컴포넌트 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 // 리액트 패키지를 불러온다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 // function Bucketlist(props){ // return ( // 버킷 리스트 // ); // } // 이렇게 쓸 수도 있다.. =>가 들어간 함수를 화살표 함수라고 한다. // ()안에 props는 부모 컴포넌트부터 받아온 데이터다. // 얘의 부모가 누구냐? const BucketList = (props) => { // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환한다. return ( 버..