TIL 221026 양방향 바인딩 / 이것저것 복습 / 스타일 컴포넌트

오늘 공부한 것

• 양방향 바인딩
• 스테이트 끌어올리기 복습
• 뭐 투두리스트 비슷~한 거 연습해봤음
• 스타일 컴포넌트

양방향 바인딩

  const submitHandler = (e) => {
    e.preventDefault();
    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };
    console.log(expenseData);
    setEnteredAmount("");
    setEnteredDate("");
    setEnteredTitle("");
  };

  return (
    <form onSubmit={submitHandler}>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input
            type="text"
            value={enteredTitle}
            onChange={titleChangeHandler}
          />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input
            value={enteredAmount}
            type="number"
            min="0.01"
            step="0.01"
            onChange={amountChangeHandler}
          />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input
            value={enteredDate}
            type="date"
            min="2019-01-01"
            max="2022-12-31"
            onChange={dateChangeHandler}
          />
        </div>
      </div>
      <div className="new-expense__actions">
        <button type="submit">Add Expense</button>
      </div>
    </form>
  );
}

onChange를 이용해서 인풋 입력 값을 감지해서 스테이트 값을 변경하고, 버튼을 눌러 submit을 했을 때, 인풋 입력으로 변경된 스테이트 값을 객체에 저장하고, 스테이트를 다시 초기값으로 돌리는 작업(submitHandler)을 했다. 인풋의 value에 enteredTitle과 같은 스테이트 자체를 값으로 넣어놓으면 서브밋 이벤트로인해 인풋의 밸류가 초기값으로 초기화 되면서 빈 칸으로 비워지게 된다!

state 끌어올리기

형제 컴포넌트 간의 데이터 교환은 불가능하니 부모 컴포넌트를 이용해서 두 가지 컴포넌트끼리 데이터를 교환할 수 있게 한다.

이 예시에서는 NewExpense컴포넌트에서 업데이트를 원하는 값을 생성해서 App 컴포넌트로 상태를 끌어와 가져오고, App 컴포넌트에서 Expenses 컴포넌트로 props를 이용해 데이터를 전달한다.

스타일 컴포넌트

설치 구문

npm install --save styled-components

패키지 깔고나면 코드 알록달록하게 해주는 익스텐션을 꼭 깔도록 하자 문자열 색깔로만 보여서 한참 괴로워했음 젠장~!

import styled from "styled-components";

const Button = styled.button`
  font: inherit;
  width: 100%;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
  transition: 0.2s;

  @media screen and (min-width: 768px) {
    width: auto;
  }

  &:focus {
    outline: none;
  }
  &:hover,
  &:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`;

사용 방식 자체는 생각보다 간단했다! & 과 백틱만 잘 사용하면 된다.
기존 css와 다른 점은

& label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
    color: ${(props) => (props.invaild ? "red" : "black")};
  }

  & input {
    display: block;
    width: 100%;
    border: 1px solid ${(props) => (props.invaild ? "red" : "#ccc")};
    background: ${(props) => (props.invaild ? "#ffd7d7" : "transparent")};
    font: inherit;
    line-height: 1.5rem;
    padding: 0 0.25rem;
  }

이런 식으로 삼항연산자를 사용해서 스타일을 동적으로 바꾸는 게 가능하다.
컴포넌트를 스타일링하고 설정한 컴포넌트에서만 스타일링을 적용하는 것을 원할 때 딱임.
신비로운 코드의 세계

유데미에서 할인할 때 사놓은 리액트 강의(무려 런타임 50시간)를 보기 시작했다. 처음에는 반쯤 직역 자막인 게 영 적응이 안돼서 아 이거 괜히 샀나? 싶었는데 보다보니 또 괜찮다. 번역이 좀 이상할 땐 리스닝해서 스스로 알아들어야 된다는 문제가 있긴 함ㅋㅋㅋㅋ 그래도 중~고등학생 영어 수준이면 알아들을만 하다.

뭐 영어 공부도 병행한다고 생각하면서 하면 이것도 나름? 얻어가는게 있으니? 그래도 강의 질은 짱 좋다! 맘에 들어!! 나중에 이분 다른 영상도 사서 봐야곘음 고마워요 웅진 글로벌 어쩌고!! 👍 나아중에 보게 플러터 강의도 좀 번역해주세요!!