리액트 기초반 2주차

minkyung·2022년 5월 21일
0
post-thumbnail


🐳 1. 라이프 사이클이란?

가상돔
돔에 연산이 너무많이 일어나게됨 -> 가상돔
가짜 돔을 하나 만듬. 메모리 위에서만 돌아가는 돔.
토글 버튼을 눌렀다. 그러면 가상 돔에다가 일단 올려봄. 그래서 진짜 돔이랑 비교함. 그래서 바뀐 부분만 진짜 돔에 적용하는 것임.

변경 사항을 전부 다 넣고 마지막에 진짜 돔에 바뀐것만 적용하느것.

진짜 돔을 어떨때 새로 그림?

  1. 첫번째 진짜 돔 만들때
  2. 데이터가 변했을 때

가상돔을 쓰면 진짜 돔을 매번 업데이트할 떄보다 확연히 빠르게 연산할 수 있음.

실제 돔을 건드리는 빈도가 줌. 근데 가상돔도 계속 업데이트하고 뭘 계속 만들고 연산이 필수적으로 들어가긴 함. 사이트 구조에 따라사 연산을 줄일 수 있음. 사이트 구조에 따라서 가상돔보다 진짜돔에다가 만져주는게 더 빠를수도있음.

사이클 구조에 따라서 진짜 돔을 쓰는게 나을 수도 있음.

라이프 사이클: 컴포넌트가 나타났다가 사라지기까지의 한 과정
컴포넌트 생명주기



🐳 2. 라이프 사이클 함수로 보는 라이프 사이클

컴포넌트 1. 클래스 2. 함수형 컴포넌트
리액트는 공식적으로 함수형만 쓰라고 선언한 상태
라이프 사이클 컴포넌트는 클래스형 컴포넌트에서만 쓸 수 있음.
왜 배우느냐? 라이플 사이클 메서드는 생재구리를 리액트 훅은 생애주기를 한눈에 확 파악하기가 어려움. 배우기 위해서 라이프 사이클을 쓴다.

클래스형 컴포넌트까지 써볼 것임. 많이 보게 될 것이기 때문임. 코드 리딩과 수정을 할 수 있을만큼만 배울 것임.



🐳 3. Component (1)

클래스형과 함수형 컴포넌트가 있음.
컴포넌트 = 조각, 레고블록 이라고 봐도 됨
컴포넌트를 잘 쪼개는것도중요함

state 컴포넌트가 가지고 있는 데이터
내꺼니까 수정도 쉽게 할 수 있음.
State는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터입니다.
생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄집니다. 내꺼니까 생성도 수정도 자유롭죠!

props 부모로부터 가져온 데이터



🐳 4. Component (2)

함수형 컴포넌트

컴포넌트 기본형 (function으로도 만들 수 있음)

컴포넌트는 여기저기 불려다가 쓸 수 있여ㅓ야함. 다른 파일에서도 이 컴포넌트를 불러서 쓸 수 잇도록 익스포트.

const BucketList = (props) => {
    return (
        <div>버킷 리스트</div>
    );
}

export default BucketList;

app.js 에서 컴포넌트 불러다가 안쓰면 당연히 화면에도 안보임

import logo from './logo.svg';
import './App.css';

import BucketList from './BucketList';

function App() {
  return (
    <div className="App">
     <BucketList/> 
     {/* 자식 컴포넌트 불러옴 */}
    </div>
  );
}

export default App;

그냥 Export / import 로만 보내보기

컴포넌트 파일)
export {BucketList};
app.js 파일)
import {BucketList} from "./BucketList"

./ => 지금 내가 있는 폴더 기준
../ => 폴더 하나 위로 올라가고싶음
.../ => 폴더 두개 위로 올라가고싶음
파일명 뒤에 .js 생략해도 됨


🐳 5. Component (3)

클래스형 컴포넌트

함수형 컴포넌트로 만들었던걸 클래스로 만들어보기

위 이미지에 있는 애들은 꼭 필수로 있어야함
(render 하는 요소가 꼭 하나 있어야하는 JSX문법 규칙)



🐳 6. 퀴즈 (손도 못댐)

Quiz 1: my_list에 ['a', 'b', 'c'] 대신
부모 컴포넌트가 넘겨준 값을 넣으려면 어떻게 해야할까요?
부모 컴포넌트를 설정 안해도 (extends를 안해도) ... 값을 넘겨줄 수 있는거임? 이모도?
(BucketList.js)

const BucketList = ({list}) => {
const my_lists = list;
=> 파라미터도 들어오는 건 딕셔너리이고, 키 값이 리스트일건데  
  값은 받아온 것이야 ???????????????
  
혹은

const BucketList = (props) => {
const my_lists = props.list;
  
return (<div key={index}>{list}</div>);
여기서 key={index} 이건 무슨 뜻이지 .........
  
app.js)

  return(
    <div className='App'>
      <h1>내 버킷리스트</h1>
      <BucketList list={this.state.list}/>
    </div>
  )
  
  여기서 return div 밑에 BucketList가 들어간게 ... 자식이 된건가?
  닭이 먼저인지 달걀이 먼저인지 ?

퀴즈를 발판삼아 내가 지금까지 이해한 내용 ..... 근데 확신 없음



🐳 7. React에서 CSS 사용하기

마진 병합 상쇄 현상

height: 100vh;
화면비율(화면을 기준으로해서 100%주겠다)

vw라는 단위는 뭔지??



🐳 8. styled-components

  • class 이름 짓기에서 해방됩니다!
  • 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적입니다!

https://styled-components.com/docs

  &:hover{
    background-color: yellow;
  }
  SCSS 문법에서 '나'를 가르킬 때


🐳 9. 버킷리스트에 styled-components 적용하기



🐳 10. Ref! 리액트에서 돔요소를 가져오려면?



🐳 11. state 관리 (1)

단방향 데이터 흐름 (부모 -> 자식)
데이터는 위에서 아래로 넘겨줘야한다는 소리

컴포넌트가 화면에 그려질 때부터 완전 사라질 때까지 = 라이프 사이클

클래스형 컴포넌트)

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 3,
    };
  }
  
  componentDidMount() {}

  // 버튼 눌렀을 때 네모 추가해주는 함수
  addNemo = () => {
    this.setState({count: this.state.count +1 });
    // state를 바꿔주는 함수
  }

  removeNemo = () => {
    if(this.state.count > 0){
       this.setState({count: this.state.count -1 });
    } else {
      window.alert('네모가 없습니다!')
    }
  }

 
  render() {
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i);
    console.log(this.state)
    
    return (
      <div className="App">
        {nemo_count.map((num, idx) => {
          return (
            <div key={idx}
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#ddd",
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}

        <div>
          <button onClick={this.addNemo}> 하나 추가 </button>
          {/* addnemo 뒤에 () 괄호 넣으면안됨.
          button onClick={()=>{this.addNemo();}} */}
          <button onClick={this.removeNemo}> 하나 빼기 </button>
        </div>
      </div>
    );
  }
}




export default App;


🐳 12. state 관리 (2)

import React from "react";

const Nemo = (props) => {
    const [count, setCount] = React.useState(3);
    // Count= 값, state 값 setCount = count(값)를 변경하는 함수, 수정하는 함수
    // usestate(state에 들어가는 초기값)
    console.log(count)
    const nemo_count = Array.from({ length: count}, (v, i) => i);

    //이 안에서 그냥 애드메모 넣어서 만들면 실패. Nemo가 클래스가 아니기 때문에.
    const addNemo = () => {
        setCount(count + 1);
    }

    const removeNemo= () => {
        if (count > 0 ){
              setCount(count -1);
        }else {
            window.alert('네모가 없습니다!')
        }
      
    }
    return (
        <>
            {nemo_count.map((num, idx) => {
                return (
                <div key={idx}
                    style={{
                        width: "150px",
                        height: "150px",
                        backgroundColor: "#ddd",
                        margin: "10px",
                    }}
                >
                    nemo
                </div>)
                
            })}
            <div>
                <button onClick={addNemo}> 하나 추가 </button>
                {/* addnemo 뒤에 () 괄호 넣으면안됨.
                button onClick={()=>{this.addNemo();}} */}
                <button onClick={removeNemo}> 하나 빼기 </button>
            </div>
        </>
    );
}

export default Nemo;


🐳 13. 퀴즈_버킷리스트에 아이템 추가



🐳 14. 끝&숙제설명

state를 관리하는 방법
DOM에 접근하는 방법
강제업데이트는 안하는게 좋음

App.js ------------------------------------------------------------

import Start from './2week_quiz';
import React, { useState } from 'react';

function App() {
const [name, setName] = useState("김민경");

  return (
    <div>
      <Start name={name}/>
    </div>
  );
}

export default App;
import React from "react";

const Start = ({ name }) => {
    const my_name = React.useRef(name); 


    return (
        <div style={{
            margin: "20px",
            backgroundColor:"lavender",
            maxWidth: "30vh",
            display: "flex",
            flexDirection: "column",
            padding: "40px",
            borderRadius: "20px"
        }}>
            <img src="/img/thumbnail.png" style={{
                width:"300px"
            }}></img>
            <h1  style={{
             wordBreak: "keep-all",
             textAlign: "center"
            }}>나는 <span style={{
                backgroundColor: "#8977ad",
                color: "white"
            }}>{name}</span>에 대해 얼마나 알고 있을까?</h1>
            <input placeholder="내 이름" type="text" ref={my_name} style={{
                borderRadius: "30px",
                padding: "14px",
                border: "1px solid #eee",
                margin: "20px 0px",
            }}></input>
            <button style={{
                backgroundColor: "#8977ad",
                borderRadius: "30px",
                padding: "14px",
                width: "100px",
                border: "1px",
                color:"white",
                alignSelf:"center"
            }}>시작하기</button>
            {/* {my_name.map((name, index) => {
                return <ItemStyle key={index}>{list}</ItemStyle>
            })} */}
        </div>
    );
}


export default Start;

이미지 import 해서 사용하기

import img from "./scc_img01.png";
src={img}
profile
프론트엔드 개발자

0개의 댓글