221128 TIL React 입문주차 3

1-12 Counter 만들기

버튼을 클릭할때마다 1씩 증가하거나 감소하는 counter 만들기

// state를 사용할 것이기 때문에 { useState }를 삽입
import React, { useState } from "react";

const App = () => {
// state 사용 구문 기본값음 숫자 0으로 지정
  const [number, setNumber] = useState(0);

  return (
    <div>
      {number}
      <button
      // 1회성으로 사용되는 기능이기때문에 handler가 아닌 익명함수를 사용.
      // () => { setNumber(number + 1); }
        onClick={() => {
          setNumber(number + 1);
        }}>
      증가
      </button>
      <button
        onClick={() => {
          setNumber(number - 1);
        }}
      >
        감소
      </button>
    </div>
  );
};

export default App;

 

1-13 컴포넌트 꾸미기

import React from "react";

const App = () => {
  const style = {
    padding: "100px",
    display: "flex",
    gap: "12px",
  };

  const squareStyle = {
    width: "100px",
    height: "100px",
    border: "1px solid green",
    borderRadius: "10px",
		display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };

  return (
    <div style={style}>
      <div style={squareStyle}>감자</div>
      <div style={squareStyle}>고구마</div>
      <div style={squareStyle}>오이</div>
      <div style={squareStyle}>가지</div>
      <div style={squareStyle}>옥수수</div>
    </div>
  );
};

export default App;

css 기초 더보기

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

CSS basics - Learn web development | MDN

개발자도구 이용해 보기

- "검사"의 마우스를 클릭하고 이와 같이 스타일을 확인하면서 여러 경우를 시험해 볼 수 있다.

 

1-14 반복되는 컴포넌트 처리하기

import React, { useState } from "react";
import "./App.css"; // 🔥 반드시 App.css 파일을 import 해줘야 합니다.

function CustomButton(props) {
  /*CustomButton 을 통해 버튼의 style을 효율적으로 관리할 수 있다.*/
  const { color, onClick, children } = props;
  // color값이 있다면 이렇게 받아온다.
  if (color) {
    return (
      // 여기서 children은 뭐지?
      <button
        style={{ backgroundColor: color, color: "white" }}
        onClick={onClick}
      >
        {children}
      </button>
    );
  }
  return <button onClick={props.onClick}>{props.children}</button>;
}

function User(props) {
  return (
    <div className="square-style">
      {props.user.age}살 - {props.user.name}
      <CustomButton
        color="red"
        onClick={() => {
          props.handleDelete(props.user.id);
        }}
      >
        삭제하기
      </CustomButton>
    </div>
  );
}

const App = () => {
  // 데이터의 배열을 만들어준다.
  // state를 사용하기 위해 setUsers와 useState를 넣어준다.
  const [users, setUsers] = useState([
    { id: 1, age: 30, name: "송중기" },
    { id: 2, age: 24, name: "송강" },
    { id: 3, age: 21, name: "김유정" },
    { id: 4, age: 29, name: "구교환" },
  ]);

  // 이곳은 name과 age를 입력받았을때 state값을 받아올 함수
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  // user를 추가해주었을때 값을 받아올 event handler 생성
  const addUserHandler = () => {
    const newUser = {
      // user의 길이에 1을 추가한다. 배열 내에 4개의 요소가 있는경우 5번째를 추가한다.
      id: users.length + 1,
      age: age,
      name: name,
    };
    // 전개연산자에 newUser를 추가해준다.
    setUsers([...users, newUser]);
  };

  // 삭제기능을 위한 event handler
  const deleteUserHandler = (id) => {
    // user.id가 id와 같지 않다면 새로운 배열을 생성해준다?
    const newUserList = users.filter((user) => user.id !== id);
    // 새로운 배열 newUserList을 생성해준다.
    setUsers(newUserList);
  };

  return (
    // map함수를 통해 배열값을 불러온다.
    <div>
      <div className="app-style">
        {users.map((user) => {
          if (user.age < 25) {
            return (
              <User
                handleDelete={deleteUserHandler}
                user={user}
                key={user.id}
              ></User>
            );
          } else {
            return null;
          }
        })}
      </div>
      <input
        value={name}
        placeholder="이름을 입력해주세요"
        // 인풋 이벤트로 들어온 입력 값을 name의 값으로 업데이트
        onChange={(e) => setName(e.target.value)}
      />
      <input
        value={age}
        placeholder="나이를 입력해주세요"
        // 인풋 이벤트로 들어온 입력 값을 age의 값으로 업데이트
        onChange={(e) => setAge(e.target.value)}
      />
      <CustomButton color="green" onClick={addUserHandler}>
        추가하기
      </CustomButton>
    </div>
  );
};

export default App;

 

1-15 Component 분리하기

더 알아보면 좋은 키워드

• 자바스크립트 파일 절대경로, 상대경로 설정하는 방법
• 자바스크립트 export, export default, import 각각은 무슨차이가 있을까?