리액트

리액트 스타일링

인라인 스타일

<h1 style={{}}>

className

<h1 className="sample">
--
.sample {
}

styled-components

yarn add styled-components
--
import style from "styled-components"
--
const StBox = style.div `
	border: 1px solid ${(props) => props.borderColor};
`
--
<StBox borderColor="red">박스</StBox>
<StBox borderColor="green">박스</StBox>
<StBox borderColor="blue">박스</StBox>

⬇️리팩토링

const boxList = ["red", "green", "blue"]
const getBoxName = (color) => {
	switch(color) {
    case "red";
    	return "빨간 박스";
    case "green";
    	return "초록 박스";
    case "blue";
    	return "파랑 박스";
    default:
    	return "검정 박스";
 	}
}
--
{boxList.map((boxColor)=>{
	return (
    	<StBox key = {boxColor} borderColor = {boxColor}>
        	{getBoxName(boxColor)}>
        </StBox>
    );
})}

프롭스를 사용하여 조건부 스타일링 가능하다...

리액트 훅

useState()

const [state, setState] = useState(초기값)
setState를 이용하여 state의 상태를 변경한다.

update 방식

1. 직접적인 업데이트
   state를 직접적으로 가져와서 업데이트 하는 방식

setState(state+1);

2. 함수형 업데이트

setState((prev) => prev+1);

=> 차이점?
1. 리액트의 상태 업데이트는 비동기적이므로 (배치 업데이트 : 불필요한 리렌더링을 방지하기 위해 모아서 한꺼번에 처리한다.) 1과 같은 행위가 반복되었을 때 병합하여 결과 반환된다. 즉, 세 번 반복을 위해 세 번 기입해도 한 번만 실행된다.
2. 프롭스 전달할 때 1의 경우 state, setState 두 개 가져와야 한다. 2의 경우 setState 한 개만 가져오면 된다.

결론 함수형 업데이트에 대해 알게 되었으면 앞으로 안전하고 편리한 함수형 업데이트를 사용하자

useEffect()

컴포넌트가 화면에 처음 나타나고(mount), 사라지게 될 때(unmount)를 제어할 수 있다.

mount, unmount

mount? 컴포넌트가 처음 화면에 나타날 때
unmount? 컴포넌트가 화면에서 사라질 때

트리거

의존성 배열
모든 state의 변경사항을 확인하고 싶을 경우에는 기재하지 않아도 되지만, 특정 state의 변경에 따라 어떤 로직을 실행하고 싶을 때 사용

clean-up 함수

unmount될 때 작동하는 함수

useEffect 사용 방법

useEffect(() => {
	메인 로직
    return () => {
    // 클린업 메인 로직
  };
}, [의존성배열*]);
*콜백 함수 내에서 사용되는 외부 변수나 함수들을 넣어야 함 (e.g. state, props, 함수)
의존성 배열에 포함된 값들이 변경될 때마다 실행
의존성 배열이 **비어있을 경우는** 콜백 함수는 컴포넌트의 첫 번째 렌더링 시에**만** 생성

알고리즘

문자열 매서드
split()
indexOf()
replace(), replaceAll()

문자열이 몇 번 등장하는지 세기

문자열 myString과 pat이 주어집니다. myString에서 pat이 등장하는 횟수를 return 하는 solution 함수를 완성해 주세요.

function solution(myString, pat) {
    let myArr = [];
    
    for (let i = 0; i < myString.length; i++) {
        if (myString.slice(i, i + pat.length) === pat) {
            myArr.push([i]);
        }
    }
    return myArr.length;
}

더 나은 방법이 생각나지 않는다... 이것보다 나은 방법이 분명히 있을 것 같은데 아쉽다~!

앗 강의 많이 못 들었다...🥹
코드카타 특강 + 발제 + 강의 듣다가 + 수준별 특강 + 코드카타 과제 + 수준별 과제 다 끝내니까 벌써 8시 54분... 별 거 안 했는데 고민하는 시간이 길다. 베이직 강의가 계속 밀리고 있어...🥹 안 돼...😣 내일은 계획한 것을 다 끝냈으면 좋겠다...!!