리액트 기초반 2주차(2)

Ref

만약에, 내가 어떤 인풋박스에서 텍스트를 가져오고 싶으면 리액트 요소에서 가져와야한다.

useRef()라는 리액트 훅을 사용해서 가져올 수 있다.

import React from 'react';
import styled from "styled-components";

const BucketList = (props) => {
    console.log(props)
    const my_list = props.list_a;


    const my_wrap = React.useRef(null);
    // useRef()의 인자는 가장 초기값이다.
    console.log(my_wrap)
    // ref를 만들자마자 console을 찍었기때문에 null이 나온다 그 다음에 return이 된다.
    window.setTimeout(() => { // 1초 뒤에는?!
        console.log(my_wrap);
      }, 1000);
    // {current: div} 나온다. 1초 뒤에는 진짜 DOM으로 리턴해주는 요소들을 다 보내버렸기 때문.
    

    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
    return (
        <div ref={my_wrap}>
            {
                my_list.map((list, index) => {
                    console.log(list);
                    return (<div key={index}><ListBox>{list}</ListBox></div>);
                })
            }
        </div>
    );
}


const ListBox = styled.button`
    background-color: #CDCDCD;
    height: 5vh;
    width: 30vw;
    font-size: 0.8em;
    margin: 1vh 2vw;
    padding: 1vh;
    border: none;
    border-radius: 3px;
    &:hover{
        background-color: white;
        border: 2px solid #CDCDCD;
    }
`;

export default BucketList;

 

State 관리

단방향 데이터 흐름이란 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다는 뜻이다.

 

- 단방향으로 써야하는 이유

부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어납니다.

만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각해봅시다.

그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 되겠죠? 앗..., 그럼 또 자식 컴포넌트가 리렌더링 될 거구요. 무한 랜더링이 된다. 데이터 구조, 랜더링 과정이 깔끔하지 못하게된다.

 

useState

import React, { useState, useRef } from "react";
import img from "./scc_img01.png";

const Start = () => {
const [name, setName] = React.useState("르탄이");
const inputRef = useRef();
const changeName = () => {
  setName(inputRef.current.value);
};

return (
  <div
    style={{
      display: "flex",
      height: "100vh",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
      padding: "16px",
      boxSizing: "border-box",
    }}
  >
    <img
      src={img}
      style={{
        width: "60vw",
        margin: "16px",
      }}
    />
    <h1 style={{ fontSize: "1.5em", lineHeight: "1.5" }}>
      나는 <span style={{
          backgroundColor: "#fef5d4",
          padding: "5px 10px",
          borderRadius: "30px"
      }}>{name}</span>에 대해 얼마나 알고 있을까?
    </h1>
    <input ref={inputRef} style={{
        border: "1px solid #dadafc",
        borderRadius: "30px",
        padding: "10px", 
        width: "100%"
    }}/>
    <button onClick= {changeName} style={{
        padding: "10px 36px",
        backgroundColor: "#dadafc",
        border: "#dadafc",
        borderRadius: "30px",
        margin: "36px 0px"
    }}>시작하기</button>
  </div>
);
};