벌써 수업 2주차다!
이번주는 수업을 많이 듣지 못했다.
너무 더워~~ㅠㅠ 밖에 못나가겠다.
학교 컴이 빠르고 좋아서 학교에서 하고 있는데
학교 안 코로나 확진자가 점점 늘어나고 난리다.
나도 검사받고 왔는데 다행히 음성나왔다.. 휴
다시 열심히 듣자! 읏짜! 😁
[수업 목표]
- 컴포넌트의 state를 관리할 수 있다.
- 컴포넌트의 라이프 사이클을 이해한다.
- 오픈소스 패키지를 찾아서 설치할 수 있다.
- event listener를 구독할 수 있다.
- React hook 중 useState(), useEffect()를 사용할 수 있다.
화면을 예쁘게 만든다 SCSS
SCSS는 CSS를 편하게 쓰도록 도와주는 친구!
SCSS 주요문법
-
Nesting - 축약형으로 묶을 수 있다.
-
상위 요소 이어쓰기 &
ex2.) &"로! 클래스명 등, 글자도 이어쓸 수 있어요.
&:hover { background-color: blue } -
문자열 치환
$defaultSize: 20px;
🎈사용할때는 #{$변수이름};
화면 예쁘게 ! styled-components
yarn add styled-components
라이프 사이클이란?
컴포넌트의 생명주기!
라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.
🐥react 공식문서
컴포넌트가 업데이트 되는 4가지 경우
1. state가 변했을때
2. props가 변했을 때
3. 부모 컴포넌트가 변했을 때
4. forceUpdate()를 통해 강제로 컴포넌트 업데이트라이프 사이클 함수
- constructor() _생성자 함수
- render() _컴포넌트 모양 정의, 데이터 수정x
- componentDidMount() _마운트(컴포넌트 화면 나타나기) 완료
- componentDidUpdate(prevProps, prevState)_리린더링 완료후 실행 함수
- componentWillUnmount()_컴포넌트가 dom에서 제거 될 때 실행 함수Ref! 리액트에서 돔요소 가져오기
// React.createRef()
this.text = React.createRef();
createRef()는 우리가 가지고 오고 싶은 거를
current라는 변수명 안에 넣어줌.
state관리
✍ 주의 할 점!
state 관리는 컴포넌트 만드는 순서가 중요하다!
<클래스형>
(1) App.js를 class형 컴포넌트로 바꾸고 시작!
(2) state에 count라는 변수를 추가하고, count 숫자만큼 네모칸을 화면에 띄우기
(3) 더하기, 빼기 버튼을 만들고,
(4) 함수를 만들어서
(5) 연결하자!
<함수형>
(1) Nemo 컴포넌트 만들기
(2) App에서 불러오기
(3) useState()로 count를 state로 등록하자
(4) 뷰를 만들고(=반환할 리액트 요소를 만들고),
(5) 함수를 만들어서,
(6) 연결하자!
- 단 방향 데이터 흐름
- 클래스형 컴포넌트에서 state관리 - setState()
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 3,
};
}
//state 고쳐주는 함수
addNemo = () => {
this.setState({count:this.state.count +1});
console.log('add nemo');
}
removeNemo = () => {
if(this.state.count > 0) {
this.setState({ count: this.state.count -1 });
}else{
window.alert('네모가 없어요!');
}
this.setState({count:this.state.count -1});
console.log('remove nemo');
}
componentDidMount() {
}
//뷰 담당
render() {
const nemo_count = Array.from({ length: this.state.count }, (v, i) => (i));
console.log(nemo_count);
return (
<div className="App">
{nemo_count.map((num, idx) => {
return (
<div
key={idx}
style={{
width: '150px',
height: '150px',
backgroundColor: '#eee',
margin: '10px'
}}>
nemo
</div>
)
})}
<button onClick={this.addNemo}>하나 추가</button>
<button onClick={this.removeNemo}>하나 빼기</button>
</div>
);
}
}
export default App;- 함수형 컴포넌트에서 state관리 -useState()
import React from 'react';
const Nemo = (props) => {
const [count, setCount] = React.useState(3);
console.log('in nemo');
console.log(count);
const addNemo = () => {
setCount(count+1);
}
const removeNemo = () => {
//삼항 연산자
setCount(count > 0? count-1 : 0);
}
const nemo_count = Array.from({length: count}, (v, i) => (i));
return (
<div className="App">
{nemo_count.map((num, idx) => {
return (
<div
key={idx}
style={{
width: '150px',
height: '150px',
backgroundColor: '#eee',
margin: '10px'
}}>
nemo
</div>
)
})}
<button onClick={addNemo}>하나 추가</button>
<button onClick={removeNemo}>하나 빼기</button>
</div>);
}
export default Nemo;이벤트 리스너
이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것!
대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰인다.
이번주 HW
tinder-card 쓰면 완전 간단하게 만들어지는데
이벤트 리스너로 직접 swipe 만드는게 입문자가 하기엔
난이도가 있어보였다..어렵다 어려워;;
선생님께서 코드짜는거 감탄만 하다가
결국 숙제 제출에 SwipeItem.js는 복붙해서 넣었다
나중에 이벤트 리스너 좀 더 공부하고 다시볼게요,,
2주차 끝~
💻유용한 사이트
✨알고가기
- alt+shift+f : 코드 예쁘게 정리
- 소괄호()는 즉시 실행을 의미한다.
- JS파일과 컴포넌트 이름,생성자 함수는 파스칼 케이스를 사용(ThisIsPascal)
- 폴더이름, 변수, 함수명는 카멜케이스(thisIsCamel)
- 스네이크 표기(this_is_snake)
- const는 상수: 한번 선언한 값은 바꿀 수 없다, block단위