이번주 과제는 문제풀이 5문제와, 저저번 4주차(어린이날이라 쉬어서 저저번주 임) 과제로 만들어간 개인 페이지 보강할점 찾아서 보강하기!

나같은 경우는 그..문제였던 웹페이지 주소상 이름과 디자인 쪽을 축제 프로젝트를 위해 연습할 겸, 좀 보강하면 될 것 같다.

1. 문제 풀이

1. 바탕 화면에 새로운 리액트 프로젝트를 생성하고, 해당 폴더로 이동해 프로젝트를 실행하는 방법을 순서대로 쓰세요. 또 이미 열려있는 서버를 끄는 방법도 설명해보세요.

1\. vsCode 열기

2\. 터미널 창 오픈 후, cd ~/Desktop으로 경로를 바탕화면으로 이동 이후 npx create-react-app (파일명) 입력
이후 cd (생성 후 복사한 파일의 경로) 입력으로 터미널창의 경로 조정

3\. npm start로 로컬 서버 열기

4\. npx kill-port 3000(해당 주소는 주소창의 로컬서버 번호에 따라 변경될 수 있음) 입력

이번에 좀 솔직히 말하자면, 4번 말고, 맨날 바탕화면에서 파워셸 창 띄우고
리엑트 프로젝트 생성후 들어가서,
2번 과정을 설명을 못해서 검색을 했는데
검색중 바탕화면 주소를 경로 복사할 필요 없이 mac과 윈도우 환경 둘다에서
호환이 되는 cd ~/Desktop 이라는 즉시 바탕화면으로 경로를 이동하는 커맨드를 발견했다.

그리고 4번은 해본적이 없어서 새롭게 검색을 통해 알게 되었다.

---

2. State를 이용해 빈칸을 채워보세요.

import { useState } from "react";



const Counter = () => {
	const[count, count_change] = useState(0);  //초기값 없길래 그냥 0으로 설정
	return <div>현재 수량: {count}</div>;

};

그냥 useState 이용 문제?
근데 좀 최근에 멋사 과제말고
프로그래밍 과목에서 C언어 과제들하다가 좀 리엑트 문법을 까먹어서 예전에
했던 것들 좀 살펴보고 인터넷도 한 두 페이지 뒤져서 풀었다.

그러다가 참고한 좋은 벨로그 글이 있어서 여기에도 남겨본다.
[리액트] state를 사용하는 이유 (비얌)

---

3. 틀린 부분을 찾고 올바르게 고쳐보세요. 또 export default가 무슨 뜻인지 설명해보세요.

export default const HelloBtn = () => { 
	const sayHello = () => {
 	 alert("Hello!");
};

	return (
	<button onClick={sayHello()}>인사하기</button> 
	);

}

// 올바르게 고친것

const HelloBtn = () => {
	const sayHello = () => {
		alert("Hello!");
	};

	return (
<button onClick={ () => sayHello()}>인사하기</button> <= 화살표 함수 형식으로 바꾸어 클릭시 동작하려는 의도에 맞게 고침
	);
}; <= 여기 세미콜론 빠짐

export default HelloBtn; <= 여기 추측은 되지만 명확한 이유를 모르겠는데 리엑트 파일에 문제그대로 작성시 오류줄이 뜨는것으로 보아 이렇게 고쳐야 함 

export default의 뜻은
우선 이게 있으면 다른 파일에서 import 'HelloBtn'; 만 해주면 또 같은 로직을 그 파일에 따로 적을 필요 없는데, 비유하자면

함수의 수출명칭(?)을 export default 뒤에 있는 명칭으로 정하고 내보낸다는 뜻.

그리고 마지막줄에 명확한 이유를 모르겠다고 한건 함수를 그대로 내보내면 당연히 안될걸 직감적으로 알겠는데 명확한 오류 명은 모르는 느낌적인 느낌 정도.

---

4. App 컴포넌트에서 MenuBox 컴포넌트로 price 데이터를 넘겨주려고 합니다. 넘겨주는 쪽과 받는 쪽의 빈칸을 각각 채워주세요.

// 넘겨주는 쪽 (부모)

const App = () => {

	return (
   <MenuBox price = {15000}>// MenuBox에 price라는 이름으로 숫자 15000을 넘기기
 	);

};



// 받는 쪽 (자식)

// 부모가 넘겨준 데이터를 받아오기

const MenuBox = (menu) => { 
return <div>가격: { menu.price }원</div>;
};

답 작성후 작성한 답을 제미나이에 넣어서 오류가 있는지 검증하는 과정 중
마지막 부분에

const MenuBox = ({price}) => {
return <div>가격: { price }원</div>;
};

{price} 를 그냥 화살표 함수에 내다 넣어버리면
그냥 price만 입력해도 의도한 값이 뜬다고 한다.

개인적으로 리엑트가 생각보다 유하다고 느끼는 부분 중 하나였음.

---

5. 삼항 연산자를 이용해 재고가 0개면 품절, 1개 이상이면 주문 가능이라고 띄우는 코드를 완성해보세요.

const App = () => {
  const stock = 0; // 재고 수량

  return (
    <div>
      {stock > 0 ? 주문 가능 : 품절}
    </div>
  );
};

그냥 삼항연산자 문제였음.
근데 너무 간단하게 끝나서 이게 정답이 맞는지 작성하는 지금도 모르겠음. 제미나이한테도 물어봤는데 문제없는 코드고, 요즘 하는 c언어 과제 난이도때문에 생기는 심리적인 이유라고 한다.

(일정 변경으로 인해 6주차 스킵 후 7주차 게시물에서 계속)