TIL_리액트 찍먹

-styled-components

• styled-components 패키지 설치하기 💡 yarn add styled-components 설치시 꼭!! 프로젝트 경로 안에서 할 것 *dependencies 안에 보면 프로젝트 안에 쓰이는 모든 패키지를 기록해주는 경로 안맞으면 기록이 안됨
• styled-component란? 💡 컴포넌트에 스타일을 직접 입히는 방식 **component쓸 때 무조건 첫글자는 대문자!!!!**
• scss 문법
  • 반복적으로 써야하는 css를 한 묶음로 묶을 수 있다.(nesting 기법,,,)
  • styled-components안에 삼항연산자로 값을 줄 수 있음
  • nesting : 하위에 품고 있는 객체 쓰고 중괄호{}안에 속성 써줌 (scss 문법)

    const MyStyled = styled.div `
      width: 50vw; 
      height: 150px; 
      background-color: ${(props) => (props.bg_color? "red" : "purple")};
      p {
        color: blue;
      } 
      &:hover { 
        background-color:yellow;
      }
  `;
    

🎨 VScode 확장팩
- React Extension Pack
- styled-components snnipets

State 관리

• 클래스형 컴포넌트에서 state 관리

import React from "react";

class App extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      count: 3,
    };
  }
  
  componentDidMount(){}

  addNemo = () => {
    this.setState({count: this.state.count + 1});
  }

  removeNemo = () => {
    if(this.state.count > 0){
      this.setState({count: this.state.count -1});
    }else{
      window.alert("네모가 없오요");
    }
  }

  render(){
    const nemo_count = Array.from({length: this.state.count}, (v, i)=> i);
    console.log(this.state)
    return (
      <div className="App">
        {nemo_count.map((n, i) => {
          return (
            <div 
            key={i}
            style={{
              width:"150px",
              height:"150px",
              backgroundColor:"#ddd",
              margin:"10px"
            }}>
              nemo
            </div>
          )
        })}

        <div>
          <button onClick={this.addNemo}>하나 추가</button>
          <button onClick={this.removeNemo}>하나 빼기</button>
        </div>
      </div>
    );
  }
}

export default App;

🔥클래스형 컴포넌트 : setState()를 이용해서 this.state 추가(add) / 삭제(remove)

---

• 함수형 컴포넌트에서 sate 관리

import React from "react";

const Nemo = (props) => {
    const [count, setCount] = React.useState(3); //useStae() : 리액트 훅 
    console.log(count)
    const nemo_count = Array.from({ length: count}, (v, i)=> i);

    const addNemo = () => {
        setCount(count + 1);
    }

    const removeNemo = () => {
        if(count > 0) {
            setCount(count - 1);
        }else{
            window.alert('네모가 없오요')
        }
    }
    return (
        <>
        {nemo_count.map((n, i) => {
            return (
              <div 
              key={i}
              style={{
                width:"150px",
                height:"150px",
                backgroundColor:"#ddd",
                margin:"10px"
              }}>
                nemo
              </div>
            )
          })}
  
          <div>
            <button onClick={addNemo}>하나 추가</button>
            <button onClick={removeNemo}>하나 빼기</button>
          </div>
        </>
    );
}

export default Nemo;

🔥함수형 컴포넌트 : const로 setCount를 선언해서 useState를 사용한다 (리액트 훅)

---

React를 함수형 컴포넌트와 클래스형 컴포넌트 왔다리 갔다리 하면서 학습했다.
처음엔 정신도 없고, 뭔소린지 이해도 안됐는데,,
뭐든지 어떻게 첫술에 배부르랴!
한번보고 이해했음 내가 지금 아마존에 있었겠지 ~~
좌절금지!!!