2021. 08. 31 (2일차)

수업 전 1시간 동안 진행 되는 알고리즘 수업 !

데이터 추가

push (배열 맨 뒤에 데이터 추가): Array.push()
unshift (배열 맨 앞에 데이터 추가) : Array.unshift()

- 데이터 삭제
pop (배열 맨 뒤에 데이터 삭제)  
shift (배열 만 앞에 데이터 삭제)

- 데이터 조회
indexOf (데이터 index 값 반환) : Array.indexOf()
includes (데이터 존재 여부 반환 true / false) : Array.includes()

객체 (Object)

let Obj = { name: "철수", age : 12, school: {name:"다람쥐 초등학교"} }

Obj.name: 철수
Obj.age: 12
Obj.school: {name: "다람쥐 초등학교"}
Obj.school.name: "다람쥐 초등학교"

- 객체 데이터 추가 / 변경
Obj.키값 = “변경 값”
(키 값이 중복 되지 않으면, 새로 추가 된다.)

- 객체 데이터 삭제
delete Obj.키값

그리고 메인 수업에서 !

오늘..
배운..
React ...

결론적으로... 아직 이게 무슨 말인지... 어디가 간편해졌다는 건지...
이해가 안된다...

퀴즈로 해보라고 한 것들이...
어째 끄적끄적 하면 화면에 구현은 되는데...

이게 왜 되는건지... 이해가 안된다...

지금은 수업 따라가면서 따라 치는 것 만으로 헉헉 한다..;;;
그러다 한군데 에러라도 나면 그때부터 나혼자 멘붕 ;;
에러 해결 되지 전까지 그동안의 수업 내용이 귀에 들어오지도 않을 지경 ;;

<수업 내용>
React-Hooks(use) 함수형 컴포넌트

함수형이 실무에서 많이 쓰임.
코딩의 길이가 짧아져 가독성 높음.
추후 내용을 수정 할때 원하는 부분만 간단하게 수정해주면 된다.

🔅 기본구조
기존 변수 선언 방식: let name = "apple"
let name = "pineapple"

React (useState) 기본 구조:
const [ state, setState ] = useState(‘’)
|| || ||
name pineapple apple

✅ useState 사용하려면 React를 import 해서 사용 해야 함.

이 기본 구조가 생각하면 할수록 이해가 안되서, 집에 와서 쉽게 설명 해놓은데가 없는지 여기저기 검색했다...

얼추 이해 될 것만 같은 내용을 찾았다 !

const[ set , newSet ] = useState('')
set: 기본(ex.글제목)
newSet: 변경할 변수 값 (ex.글제목변경)
(''): 변수 값 => 무엇이든 가능(문자열: (''), 배열: ([ ])

예) 따봉👍을 누를때 마다 카운팅

import { useSate } from 'react'

export defaul function aaa(){
	const [ 따봉, 따봉변경 ] useState(0);

	function aaa(){
		따봉변경 (따봉+1) //따봉을 누를때 마다 따봉+1만큼 따봉변경에 담는다.
	}
	return(
		<div>{따봉}<div>
		<button onClick={aaa}>👍<button>
	)
}

따봉...따봉변경...

와..

이런 단어들이 들어가니까 이해가 더 잘 되는 느낌.

역시 공부는 유치원생 수준의 이모티콘 써가면서 해야 더 잘되는 듯 하다.

좋은 웹페이지 즐겨찾기