13일차 (Styled components, Globalstyles, React Hook)

Styled components

// 1. styled.div, styled.p와 같은 형식으로 태그 앞에 styled를 붙여서 만든다.
// 2. 형식은 html 형식을 따른다.

const StyledBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; // 함수임
  margin: 20px;
`;

const boxList = ["red", "blue", "green", "yellow"];

// 색을 넣으면 이름을 반환하는 함수
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "rex box";
    default:
      return "black box";
  }
};

function App() {
  return (
    <>
      {boxList.map((box) => {
        return <StyledBox borderColor={box}>{getBoxName(box)}</StyledBox>;
      })}
    </>
  );
}

 

Globalstyles

// 프로젝트 전체를 아우르는 스타일
// 이것을 index.js에 import 하여 사용함
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

 

UseState(React Hook)

1. 기존 업데이트 방법은 배치 업데이트가 됨(한꺼번에 모아서 한 번만 반영)
2. 배치 업데이트 -> 랜더링이 잦은 문제를 해결하기 위함

// 함수형 업데이트
onClick={() => setNum((current) => current + 1) }

 

Use effect(React Hook)

1. 랜더링 될 때마다 특정한 작업을 수행해야 할 때 설정하는 훅
2. 컴포넌트가 화면에 보여졌을 때
3. 컴포넌트가 화면에서 사라졌을 때 = clean up
4. 의존성 배열: 이 배열에 값을 넣으면 그 값이 바뀔 때만 useeffect를 실행

 useEffect(() => {
    console.log("hi");

    return() =>{
      console.log('bye')  // Clean up 부분
    }
  }, [이 값이 변경될 때만 useEffect 실행]);

 

Useref(reference)

1. 특정 dom을 선택해야할 때 사용
2. 객체 형태로 출력(current : 초기값)
3. 저장공간으로 활용
    1) state와 비슷한 역할 -> state는 변화가 일어나면 다시 렌더링이 일어나면서 내부 변수들은 초기화 됨
    2) ref에 저장된 값은 렌더링을 일으키지 않음
    3) 정리: state는 리렌더링이 필요할 때만, ref는 리렌더링이 발생 안될 때 사용
4. 특징: 렌더링이 되기 전까지 값이 변경되지 않고, 될 때 한꺼번에 반영

활용: 렌더링 되자마자 특정 input이 focusing 돼야 할 때 사용

// 아이디가 10글자 입력되면 pw input 창으로 focus되는 코드
function App() {
  const idRef = useRef("");
  const pwRef = useRef("");

  const [id, setId] = useState("");
  useEffect(() => {
  	// idRef에 초점 맞추기
    idRef.current.focus();
  }, []);

  useEffect(() => {
  	// id의 길이가 10 이상이 되면 pwRef에 초점 맞추기
    if (id.length >= 10) {
      pwRef.current.focus();
    }
  }, [id]); // id값이 바뀔때만 실행

  return (
    <div>
      <div>
        id:{" "}
        <input
          value={id}
          onChange={(event) => {
            setId(event.target.value);
          }}
          type="text"
          // 참조할 수 있게 해줌
          ref={idRef}
        />
      </div>
      <div>
        pw: <input type="password" ref={pwRef} />
      </div>
    </div>
  );
}

 

useContext(React Hook)

Props drilling 문제점: 오류가 발생할 경우 추적이 어려워짐
필수 개념
	1. createContext: context 객체 생성
	2. Consumer: context 변화 감지
	3. Provider: context 전달 

주의 사항: 렌더링 문제가 발생
=> Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 됨

Provider: 자식 컴포넌트에 props를 넘겨주지 않아도 됨
<FamilyContext.Provider value={{houseName: houseName, pocketMoney: pocketMoney }}>
    <Father />
</FamilyContext.Provider>

// 받는 자식 컴포넌트 -> data에 context를 받아와서 사용
const data = useContext(FamilyContext);