리액트 주사위게임&가위바위보게임 만들기 - 1.기본

1️⃣ 현재 폴더에서 프로젝트 생성
npm init react-app .

2️⃣ 리액트 시작 (개발모드 실행 = 파일을 수정하면 바로 반영해줌)
npm run start

 

✅ 자동으로 크롬에서 localhost:3000 창이 열림!

 

3️⃣ 개발모드 종료
ctrl + c

 

---

 

✅ props

📚 props(properties)
: 컴포넌트에 지정한 속성
- 각각의 속성은 prop라고 불림
- 컴포넌트 태그에 지정해 준 속성은 하나의 객체 형태로 컴포넌트 함수의 첫 번째 파라미터로 전달됨


📚 children
: 컴포넌트의 자식들을 값으로 갖는 prop

⭐ 단순히 보여 주기만 할 값을 다룰 땐 prop을 만드는 것 보다는 children prop을 활용하는게 코드가 더 직관적임!

 

---

 

✅ State로 만드는 주사위 던지기 기능!

📚 State
: 리액트에서 변수 같은 것
- State를 바꾸면 리액트가 알아서 화면을 새로 렌더링 해 줌 (상태가 바뀔 때마다 화면을 새롭게 그려냄)
- useState 함수를 불러와야 함!
- const 키워드로 State를 만듬!!

📚 useState
- 파라미터로 초기값을 전달 받고,
- 함수가 실행된 후에는 배열의 형태로 요소를 리턴함 (배열의 Destructuring 문법)
⭐ 첫번째 값 = state값 = 현재 변수의 값
⭐ 두번째 값 = setter 함수 : 함수를 호출할 때 파라미터로 전달하는 값으로 State값이 변경됨
⭐ 반드시 setter 함수를 통해서만 값을 변경해야 함!
⭐ setter : State 이름 앞에 set을 붙인 형태로 이름을 지음


📚 참조형 State
- push 메소드 : 배열 함수에 값을 추가하는 것
- join 메소드 : 아규먼트로 전달한 값을 배열의 각 요소들 사이사이에 넣어서 하나의 문자열로 만들어주는 메소드
⭐ 배열 = 참조형 ==> 변수는 배열 자체를 값으로 갖는 것이 아니라, 그 배열을 가리키고 있는 주소값을 가지고 있는 것임!
= 그 배열의 주소값을 참조
⭐ 참초형 state를 변경할 때는 전체를 새로 만든다고 생각해야 함!
==> 간단한 방법으로 Spread 문법이 있음 [...]

 

📚 input의 value 속성 참조하기
= e.target.value

📚 문자열을 숫자형으로 변경하기
= Number 생성자 사용


⭐ 잘못된 문자열을 입력하는 경우 e.target.value의 값이 빈 문자열이 될 수 있기 때문에 Number(e.target.value)의 값은 0이 됨
==> 정수를 만들기 위해서는 if문으로 num을 정의해주어야 함!

 

 

📚 Math.floor()
: 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환 함
- Math.floor(null)은 0을 반환 함!