왜 리액트인가?
뷰, 리액트, 앵귤러 중 리액트의 사용자가 가장 많다. => 커뮤니티가 많이 형성되어있음
다른 형태의 서비스도 만들 수 있다. (All in One)
Component
- Component ? UI , 기능을 부품화 -> 재사용가능하게 하는 것
- 하나를 잘 만들어서(원본), import해서 사용하기 (복붙가 아니다.)
- 수정할 때 비효율적인 작업을 계속 해야 함
- 원본이 통제하는 방식 > 연결된 컴포넌트들을 통제함
- 원하는 부분도 따로 변경할 수 있음 (원본이 바뀌면 연결된 부분들이 같이 바뀌니까 편리함)
- UI의 재사용
- 요소 하나하나 뿐만 아니라 페이지도 하나의 큰 컴포넌트로 볼 수 있다 = 페이지 컴포넌트
(즉, 컴포넌트 안에 컴포넌트도 가능) ⭐️ => 함수형 컴포넌트 (페이지 전체일수도, 하나의 요소일수도)
기존에는 클래스 => 현재는 함수형으로 넘어가는 추세
왜? 함수형이 더 코드가 짧다.
function myInput() {
return <Id type ="text"></Id>
}useEffect(()=>{
})- 어떻게 등장?
Hooks (use~)로 시작하는 기능 덕분에 함수도 컴포넌트 형태로 사용하기로 함 (=클래스와 동일기능)
ex. useState, useEffect 궁금증 - 게시물등록, 상품등록, 마이페이지 등에서 클래스와 함수형을 섞어 쓸 수 있을까? Y
- 굳이 클래스형을 알아야할까? Y
- 클래스형을 함수형으로 바꿀 수 있을까? Y
useState : state를 만들어준다 (리액트에서 사용하는 변수)
🌺 State
컴포넌트 전용 변수
const [ state, setState ] = useState("철수")
const [ state, setState ] = useState("철수")
Const [ count, setCount ] = useState(0)
console.log(count) // 0
setCount(1) === 바꾸는 법
console.log(count) // 1 === 사용하는 법사용예시
const [ count, setCount ] = useState(0)
function zzz(){
setCount(count+1)
}
return (
<div>
<div>{count}</div> //자동으로 html 변경됨
<button onclick={zzz}> 카운트 증가! </button>
</div>
)왜 ??
한 번만 이해하면 훨씬 간단하게 사용할 수 있다!
함수형 컴포넌트 :
함수형 컴포넌트는 return 뒤에 html가 있다
그래서 왜 state를 쓴다구? 1번
만약 카운트 내리기를 만든다면
js는 get을 계속 반복해서 작성해야 한다.
react에서는 만들어둔 것으로 재작성이 가능함.
그래서 왜 state를 쓴다구? 2번
let을 썼을 때, console.log에는 찍힌다.
하지만 화면이 바뀌지는 않는다.
화면을 다시 그리려면 state를 쓰자.
input에 발생한 event (필요없으면 안써도 됩니당)
event.target => 태그 전체를 의미한다 <input type="text" />
event.target.value => 태그에 입력 된 값오늘의 공부를 돌아보며
오전 리액트 수업 외에도, 오늘 세션에서 깃 레파지토리 정리와 알고리즘 시간에 자바스크립트 공부를 했다.
어제 깃 설치에서 많이 버벅였는데, 오늘은 그래도 잘 따라서 설치를 끝냈다..ㅠ
터미널 사용하는 것도 익숙하지가 않구.. 맥북 첨 써봐서..ㅠㅠ 깃 자체도 익숙하지가 않구..
이렇게 여러개 파일을 연결하고 또 첨보는 명령어도 쳐야하고 정신이 없었어서 레파지토리들이 꼬여있었다
오늘 이후로는 깃 이슈는 알아서 해야한다고 하니 깃 부분도 따로 공부해야하나보다 하
오후 자바스크립트 공부는 기초수업부터 시작해서 오늘은 배열과 객체에 대해 다시 정리해볼 수 있었다.
그래도 오늘은 리액트 수업부터 전체적으로 이해도 잘 되고, 과제도 빨리 끝나서 매우 만족스러운 하루였다.
내일도 오늘만 같길~ㅜ
