프론트엔드 2주차

벌써 수업 2주차다!
이번주는 수업을 많이 듣지 못했다.
너무 더워~~ㅠㅠ 밖에 못나가겠다.
학교 컴이 빠르고 좋아서 학교에서 하고 있는데
학교 안 코로나 확진자가 점점 늘어나고 난리다.
나도 검사받고 왔는데 다행히 음성나왔다.. 휴
다시 열심히 듣자! 읏짜! 😁

[수업 목표]

1. 컴포넌트의 state를 관리할 수 있다.
2. 컴포넌트의 라이프 사이클을 이해한다.
3. 오픈소스 패키지를 찾아서 설치할 수 있다.
4. event listener를 구독할 수 있다.
5. React hook 중 useState(), useEffect()를 사용할 수 있다.

화면을 예쁘게 만든다 SCSS

SCSS는 CSS를 편하게 쓰도록 도와주는 친구!

SCSS 주요문법

1. Nesting - 축약형으로 묶을 수 있다.

2. 상위 요소 이어쓰기 &
   ex2.) &"로! 클래스명 등, 글자도 이어쓸 수 있어요.
&:hover { background-color: blue }

3. 문자열 치환
   $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주차 끝~

💻유용한 사이트

• JS 배열 MDN
• JS 이벤트 참조 MDN
• Tinder-Card 사용법

✨알고가기 
- alt+shift+f : 코드 예쁘게 정리
- 소괄호()는 즉시 실행을 의미한다.
- JS파일과 컴포넌트 이름,생성자 함수는 파스칼 케이스를 사용(ThisIsPascal)
- 폴더이름, 변수, 함수명는 카멜케이스(thisIsCamel)
- 스네이크 표기(this_is_snake)
- const는 상수: 한번 선언한 값은 바꿀 수 없다, block단위