12월3일 til

react 컴포넌트를 꾸미는 방법과 react hook 인 useState() , useEffect 에 대해서 알게 되었다,

npm i styled-components

리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 styled-components 패키지를 설치한다.
기본적인 사용법

// src/App.js

import React from "react";
import styled from "styled-components";

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

const App = () => {
  return <StBox>박스</StBox>;
};

export default App;

React Hooks

useState() 란

const [state, setState] = useState(initialState);

setState 사용방법

// 기존에 우리가 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

// setState의 ( ) 안에 수정할 값이 아니라, 함수를 넣을 수 있습니다. 그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성할 수 있다.
setState((currentNumber)=>{ return currentNumber + 1 });

React Hooks

useEffect() 란

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다

사용법

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    	//리렌더링 될때마다 계속 무한 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

렌더링 되었때 한번만 실행하게 해준다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  },[]);
  // 의존성 배열이 빈 배열이므로 처음에 딱한번만 실행되고 그 이후엔 어떤일이 일어나도 실행되지 않는다.
  // 의존성 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 의미를 가진다.

  return <div>Home</div>;
}

export default App;