2주차 과제

1번문제

옛날 방식

function 함수명() {
  return ~~~;
}

화살표 함수

const 함수명 = () => {
	return ~~~;
}

으로 바꿔서 사용한다

1번문제 답

☞

const welcomeLion = (name) => {
      return "환영합니다, " + name + " 사자님!";
    }

2번문제

삼항연산자는 if ~ else문을 한 줄로 줄이는 문법

const status = 조건 ? 참 : 거짓;

isPaid가 참, 거짓일때에 따라 status의 값이 결정되므로

isPaid가 조건, status는 = 기준 왼쪽에서 값을 대입받음

2번문제 답

☞

let isPaid = true;

    const status = isPaid ? "납부 완료" : "미납";

3번문제

member라는 객체 안에서 name, track 속성을 추출

문제에도 나와있듯 객체 안의 이름과 다르면
객체안에 키가 없다고 판단하기 때문에 이름 잘못쓰면 안됨!

3번문제 답

☞

 const { name, track } = member;

4번문제

map을 사용해서 배열의 각 요소들에 li태그를 붙여주기

( ) 안에 name은 매개변수

map안에 요소들을 하나씩 꺼내 name에 담음

4번문제 답

☞

    const list = attendance.map((name) => {
      return <li>{name}</li>;
    });

5번문제

기존엔 매개변수 자리에 (props)가 있었지만
문제에서
( )안에 바로 구조 분해 할당을 하라고 했으므로

(props)를 ({ name, track})으로 바꾸기

→함수안에서 props.을 붙이지 않고 키만 적어주면 됨

5번문제 답

☞

const ProfileCard = ({ name, track }) => {
	console.log("이름: " + name);
    console.log("파트: " + track);
    }

6번문제

map을 쓰고 매개변수자리에 바로 구조분해할당

→ {name, track, isMaster}

직책 뒤에 삼항연산자 사용

→ isMaster ? 참 : 거짓

참이면 운영진, 거짓이면 아기사자

6번문제 답

☞

const lionList = lions.map(({ name, track, isMaster }) => {
      return (
        <div>
          <h2>이름: {name}</h2>
          <p>파트: {track}</p>
          <p>직책: {isMaster ? "운영진" : "아기사자"}</p>
        </div>
      );
    });

7번문제

함수 안에 return이 없음

return의 역할 : 함수의 결과값을 반환

리액트에선 return안의 jsx를 읽어 react가 작동하는 방식

즉, 아무것도 받지 않았다고 react가 인식해서 에러가 뜸

7번문제 답

☞

const doubleNumbers = numbers.map((num) => {
      return num * 2;
    });

어려웠던 점

▶위의 3번 문제까지는 html에서 결과값이 구현이 됐는데
4번 문제는 결과값이 화면에 계속 나오지않았다

이유 :

위 내용이 jsx라서

jsx는 JavaScript의 기존 문법이 아니기 때문에
html에서는 사용불가

react에서는 변환도구가 있어 jsx → JavaScript언어로 바꿔줌

궁금했던 점

▶왜 화살표 함수를 사용할까?

기존에 함수를 정의했던 방식이랑 길이가 크게 다를게 없어보여서
왜 굳이 화살표 함수를 사용하는지 궁금했다

→react코드들은 주로 => 이 형태를 많이 띰

즉, 코드를 통일하고 보기 쉽게 하기 위해 화살표 함수를 많이 사용한다

느낀점

html, css, JavaScript을 배우면서 문법이 가끔 혼동이 될 때가 있었다
앞으로 react도 배우고 다른것들도 많이 알게 될 텐데
복습을 제대로 하지 않으면 정리가 안돼 이것도 저것도 못할 것 같다는 생각이 들었다
헷갈리지 않으려면 기존에 배웠던 문법부터 정확하게 익히고 다음으로 넘어가야 할 것 같다😢