안녕하세요 여러분 !
첫 날부터 모든게 새로워서 힘드셨죠? 모두가 처음엔 어렵고 힘드니까 너무 걱정하지 말고 끝까지 함께 걸어갔으면 좋겠습니다!
오늘은 멘토님 리뷰 폴더를 git clone 받아 보셨죠? 그리고 리뷰를 위해 yarn dev로 로컬 서버를 열여주려고했는데 열리지 않았습니다.
yarn dev는 항상 package.json이 있는 위치에서 yarn dev를 해주어야하고, 만약 이 위치에 node_modules가 없으면 yarn dev 명령어도 실행되지 않습니다. 때문에 yarn install을 먼저 해주어야했죠? 항상 git clone 후 로컬 서버를 실행해주실 때 꼭 확인해주세요!
저희가 리액트를 사용하는 이유 중에 여러가지가 있었습니다. 가장 사용자 수가 많아서 커뮤니티 활성화가 잘되어있고 웹, 앱, 데스크탑앱 모두 만들 수 있기 때문이였죠!
이렇게 편리한 리액트에는 컴포넌트라는 개념이 있는데요. UI 또는 기능을 부품화해서 재사용 가능하게 만든 것이라고 했습니다.
그런데 우리가 지금 사용하는 함수형 컴포넌트 이전에 클래스형 컴포넌트라는 것이 있었습니다.
이전에는 함수형 컴포넌트에서 지원되지 않는 기능들이 있어서 클래스형 컴포넌트를 사용했는데, 이제 함수형 컴포넌트에서도 React-Hooks를 통해서 기능을 지원해주면서 함수형 컴포넌트 사용이 더 우세해지게 되었습니다.
코드의 길이가 간결해지고 편하면서 리액트 공식문서에서도 클래스형보다는 함수형이 작성되는 것을 보면 왜 함수형을 써야하는지 아시겠죠? 하지만 유지보수를 위해서는 클래스형 컴포넌트도 알고 있어야합니다!
React-Hooks에는 다양한 기능들이 있는데 오늘은 useState에 대해서 배웠습니다.
state는 데이터를 담는 상자, useSate는 그 상자를 만드는 기능, setState는 상자에 담긴 데이터를 바꿔주는 기능이였습니다.
기존에 let으로 사용했던 방식은 매번 자바스크립트를 사용해서 화면에 다시 그려줘야하는 번거로움이 있었습니다.
하지만 state를 사용하면 데이터가 변하면 자동으로 화면을 다시 그려주기 때문에 코드도 짧아지고 편리했습니다.
이러한 기능을 이해하고 유용하게 잘 사용하시면 좋겠습니다 😊
📢5/10 과제📢
1️⃣ 노션 퀴즈 1주차의 2일차 내용(state 안녕하세요,반갑습니다/state 카운터/state 인증번호/state 회원가입 폼)
2️⃣ 어제 만든 freeboard_frontend 게시글 등록화면의 입력 데이터 state로 저장하기, 빈칸이라면 에러메세지가 나오도록 검증하기
1.배멸 array
배열 안의 데이터들은 인덱스 번호를 가지며 0번째 index 부터 시작한다
배열에 length 기능을 사용하면 배열안에 몇개의 데이터가 있는지 확인 가능
[].length
인덱스를 가져왔다면
이 인덱스로 배열의 해당 데이터를 가져올 수 있음
방법 :
[1,"안녕하세요",["2"]][0]
결과값 : 1
**마지막 데이터값 가져오기
length-1 하면 인덱스의 가장 마지막값이 가져와짐
const fruits = ["사과","바나나","파인애플"]
const newFruits = []
newFruits.push(fruits[fruits.length-1])
console.log(newFruits)
하면 파인애플 할당됨
-데이터 추가 매소드
push : 배열 맨 뒤에 데이터 추가
array.push() //함수이기 때문에 사용하기 위해 소괄호 열고 닫음
unshift : 배열 맨 앞에 데이터 추가
array.unshift()
배열에 직접적으로 할당하기
const arr = []
arr[0] = 1
console.log(arr)
결과값 [1]
-데이터 삭제 메소드
pop : 배열 맨 뒤의 데이터 삭제
array.pop()
shift : 배열 맨 앞의 데이터 삭제
array.shift()
-데이터 조회
indexOf : 데이터의 index 값 반환 (배열에서 데이터 찾을때 해당 데이터 값이 있다면 해당하는 인덱스값을 반환함)
없는데이터를 조회했다면 -1이 리턴됨
array.indexOf()
includes : 데이터의 존재 여부 반환 (true,false)
array.includes()
- 객체
arr = { name : "철수" , age : "12" , 학교 : "다람쥐초등학교"}
데이터들을 종류에 맞게 분류하여 저장
중괄호 { 로 열어 중괄호 } 로 닫는다
중괄호 사이에 있는 데이터들은 쉼표 , 로 구분되어 객체에 저장된다
객체 안에 객체 넣는것도 가능
arr = { name : "철수" , age : "12" , {school : {학교 : "다람쥐초등학교"}}
객체는 key 와 value로 데이터 저장
key 는 데이터의 이름(변수 이름처럼 자유자재로)
value 는 데이터의 값을 의미
객체의 데이터를 조회할 때는
객체의 key값을 이용해서 조회 가능
. 점으로 접근
arr.name
결과값 "철수"
arr["name"] 으로도 접근 가능
arr.school
결과값 {"name":다람쥐초등학교}
arr.school.name
결과값 "다람쥐초등학교"
배열을 키값으로도 사용 가능
let str = "age"
obj.name
obj[str]
- 객체 데이터 추가 /변경 방법
내가 추가하고싶은 객체 가져온 뒤
const obj = {
name: "철수"
school: {
"name" : 다람쥐초등학교
}
friends : ["영희","훈이"]
}
obj.키값 = ""
키값 추가
obj.address = "서울시"
키갑 변경
obj.age = 8
추가,변경 방법 동일함 : 이미 존재하면 덮어씌워지고, 키값이 존재하지않는다면 추가됨
-객체 데이터 삭제 방법
delete Obj.키값
delete Obj.school.name
- 객체뿐만아니라 배열도 , 모든타입의 데이터 다 추가 가능
const student = {
name: "철수",
age: 8
}
const school = {
name: "다람쥐초",
teacher: "다람이"
}
student.school = school
const arr = [1,2,3]
student.arr = arr
student
