Lee Jun Hyeok

안녕하세요~😸

1 분 소요

기초문법<3> 여러가지들🍓

저번 글과 같이 계속해서 기초 문법을 알아보자.

기초 문법🚩

npm install styled-components

className이 중복되지않게 class선언없이 components에 css를 직접 넣기위해 깔아줌.(CSS in js)

import styled from "styled-components";

셋팅은 이렇게 한다.

let Box = styled.div`
  padding: 20px;
`;

<Box>이렇게</Box>

사용 예시


class Abcd extends React.Component {
    componentDidMount() {

    }

    componentWillUnmount() {

    }
}

Lifecycle & Hook이라고 한다.


import React, { useEffect, useState } from "react";


function Abcd() {

  useEffect(() => {

    console.log(1);

    return ()=>{console.log(2)}

  },[]); // [] 안에 실행조건을 쓰면된다. 변수들. 빈칸을 넣으면 한번만 실행

}

최신문법의 Hook안 useEffect는 랜더링될때, 업데이트될때 ‘1‘을 보여주고 Abcd라는 컴포넌트가 끝날때 ‘2‘라는 값을 보여준다.


  useEffect(() => {

    let timer = setTimeout(() => { bloolMo(false) }, 2000);

    return () => { clearTimeout(timer) };

  }, []);

‘setTimeout’콜백함수와 ms를 사용하고 ‘2초 후에 함수안의 일을 해라’라는 뜻

또한 관습적으로 변수에 저장해두고 useEffect와 함께 사용시에는 timer를 clear 해준다.


import axios from "axios";

<div onClick={ ()=>{

    axios.get('url')

    .then( (result)=>{console.log(result.data)} ) // 성공시

    .catch( (err)=>{console.log(err)} )			  // 실패시

} }

npm install axios ➡️ Ajax를 사용하기위해.

해당 url로 get요청을 날림

그리고 나서 해야할일을 then에 넣는다.

axios라는 라이브러리는 json파일을 ““을 다 지워준 object타입으로 만들어준다.

axios.post( 'url', {객체} )

post요청은 해당 url로 필요한것을 보낸다.


let arr1 = ['a','b','c']
let arr2 = ['d','e','f']

let arr3 = [...arr1,...arr2]

console.log(arr3) // ['a','b','c','d','e','f']

‘…‘이란 대괄호를 벗겨주세요 라는뜻이다. 새로운 배열을 만들때 유용하다.


let stackContext = React.createContext();

function App() {

    let [stack,stackModify] = useState([1,2,3])

    return(

        <stackContext.Provider value={stack}>
        	<A />	//사용할 공간
        </stackContext.Provider>

    )
}

function A() {

    let stack = useContext(stackContext);

    return <B />
}

function B() {

    let stack = useContext(stackContext);

    {stack} // [1,2,3]
}

‘context 활용하기’

App에서 만든 변수 ➡️ A ➡️ B에서 자유롭게 사용할 수 있음

근데 불편하다.


import React, {useState, useContext, lazy, Suspense} from 'react';

let Detail = lazy( ()=>{ return import('./Detail.js') } );

  <Suspense fallback={ <div>로딩중입니다~!</div> }>
    <Detail/>
  </Suspense>

‘lazy, Suspense 활용하기’

위와같이 셋팅해주면 detail이라는 컴포넌트 즉 페이지로 들어갈때 import해준다.

컴포넌트들이 많아지면 import하는 것만으로 부담을 주기때문에

필요할때만 import해주는것이 좋다.

업데이트: