0615-TIL-React 강의 복습, 옷가게 할인 받기, 피자 나눠 먹기(3)

React props 추출하기 - 구조분해 할당

자식에게 props 전달하기

<div className='card-container'>
          {todo
            .filter((todo) => todo.isDone === false)
            .map((todo) => {
              return <WorkingCard todo={todo} onSubmitHandler={onSubmitHandler} />;
            })}
</div>

 

구조분해 할당X

function WorkingCard({ props }) {
  return (
    <div key={todo.id} className='todo-card'>
      <div>{props.todo.title}</div>
      <div>{props.todo.body}</div>
      <div className='button'>
        <DeleteButton todo={props.todo} onSubmitHandler={props.onSubmitHandler} />
        <CompleteButton todo={props.todo} onSubmitHandler={props.onSubmitHandler} />
      </div>
    </div>
  );
}

부모로부터 상속받은 값을 그냥 props로 사용한다면, 

key-value pair 형식인 객체로 값을 받기 때문에

 

상속받은 요소를 사용할 때마다 앞에 props.을 붙여줘야 한다.

그렇게 하지않으면 undefined를 마주할 수 있다.

 

구조분해 할당O

function WorkingCard({ todo, onSubmitHandler }) {
  return (
    <div key={todo.id} className='todo-card'>
      <div>{todo.title}</div>
      <div>{todo.body}</div>
      <div className='button'>
        <DeleteButton todo={todo} onSubmitHandler={onSubmitHandler} />
        <CompleteButton todo={todo} onSubmitHandler={onSubmitHandler} />
      </div>
    </div>
  );
}

 

위와 같이 상속받은 요소를 구조분해 할당으로 받게 되면, 

상속받은 요소가 무엇인지 확인도 할 수 있을 뿐더러

요소 앞에 props.을 붙이지 않아도

할당 받은 이름 자체인 todo와 onSubmitHandler만으로 사용 가능하다.

 

React State의 불변성을 지켜주는 방법

새로운 객체를 만들어 주어야 한다.

배열이나 객체는

스프레드 문법 또는 map, filter를 이용해서 불변성을 지켜주어야 한다!

 

 

프로그래머스 입문 : 옷가게 할인 받기

첫번째 시도

function solution(price) {
  var answer = 0;

  //10만원 이상일 때
  if (price >= 100000 && price < 300000) {
    answer = Math.floor(price * 0.95);
  }
  //30만원 이상일 때
  else if (price >= 300000 && price < 500000) {
    answer = Math.floor(price * 0.9);
  }
  //50만원 이상일 때
  else if (price >= 500000) {
    answer = Math.floor(price * 0.8);
  }
  //해당되지 않을 때
  else {
    answer = price;
  }
  return answer;
}

위의 풀이는 문제에 적혀 있는

10만원 이상이면 5% 할인, 30만원 이상이면 10% 할인, 50만원 이상이면 20% 할인 된다는 조건을

순서대로 작성한 풀이이다.

 

작은 금액부터 조건을 확인하게 되어 &&로 구간을 나눠주어야 원하는 값을 얻을 수 있다.

 

두번째 시도

function solution(price) {
  var answer = 0;

  //50만원 이상일 때
  if (price >= 500000) {
    answer = Math.floor(price * 0.8);
  }
  //30만원 이상일 때
  else if (price >= 300000) {
    answer = Math.floor(price * 0.9);
  }
  //10만원 이상일 때
  else if (price >= 100000) {
    answer = Math.floor(price * 0.95);
  }
  //해당되지 않을 때
  else {
    answer = price;
  }
  return answer;
}

 

위의 풀이처럼

큰 금액부터 확인하는 흐름으로 조건문을 작성하면 더 간단하게 풀어낼 수 있다.

 

다음에 문제를 풀 때는

문제설명을 읽고, 한번 더 생각해보는 시간을 갖고 문제를 풀어봐야 겠다!!🔥

 

프로그래머스 입문 : 피자나눠먹기(3)

첫번째 시도

function solution(slice, n) {
  var answer = 1;

  answer = answer + Math.ceil(n / slice);

  return answer;
}

Math.ceil은 소수점을 올림하는 메서드이기 때문에 

처음에 answer에 0으로 시작해야 한다..!!

 

피자는 무조건 1판은 필요하니까 1을 넣고 시작했는데,

메서드가 무조건 올림하는 방식이라 그럴 필요가 없었다!

 

문제 해결

function solution(slice, n) {
  var answer = 0;

  answer = Math.ceil(n / slice);

  return answer;
}

아주 간단하게 해결!