[TIL] 내일배움캠프 React 과정 2023.01.19

Today I Learned

Typescript 공부하기
Programmers 문제 풀기

React의 Component Lifecycle(생명주기)

useEffect(()=>{
    // componentDidMount (처음 컴포넌트 렌더링된 이후 실행)
    return () => {
        // componentWillUnmount (컴포넌트가 사라지기 직전에 실행)
    }
}, [])

useEffect(()=>{
    // componentDidMount (처음 컴포넌트 렌더링된 이후 실행)
    // componentDidUpdate (변경된 state로 컴포넌트 렌더링된 이후 실행)
}, [state])

useEffect 의미 : render (return jsx) 이후 side effect 실행

state 변경을 batching 처리한다는 의미는?

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

동일한 scope 내에서 실행되는 state 변경함수가 2개 이상일 때, 하나씩 각각 state변경 및 리렌더링 하지 않고, 모든 state 변경함수들을 모았다가 한 번에 모든 state 변경을 시킨 후 리렌더링 한다.

코드 출처 https://github.com/reactwg/react-18/discussions/21

Type Narrowing

function 내함수(x :number | string){
  if (typeof x === 'number') {
    return x + 1
  } 
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

Programmers 문제 풀기

옷가게 할인 받기

function solution(price) {
    return price >= 500000 ? price*0.8 : price >= 300000 ? price*0.9 : price >= 100000 ? price*0.95 : price
}

처음에 이렇게 풀었는데 케이스 2개에서 실패했다. 알고 보니 문제에 "소수점 이하를 버린 정수를 return합니다."라는 조건이 있었고, 따라서 숫자 내림 처리를 해주는 Math.floor()가 return 전체를 감싸도록 수정했다.

function solution(price) {
    return Math.floor(price >= 500000 ? price*0.8 : price >= 300000 ? price*0.9 : price >= 100000 ? price*0.95 : price)
}

다른 사람 풀이 볼 때 삼항연산자로 한 줄로 완성한 코드가 멋있어(?) 보였기 때문에 오늘은 나도 삼항의 삼항의 삼항으로 풀어봤다 ㅎㅎ

지금까지 최고 점수가 3점이었는데 갑자기 11점 무슨 일???😳

외계행성의 나이

나의 풀이

function solution(age) {
    const array = Array.from({ length: 26 }, (v, i) => String.fromCharCode(i + 97));
    return (age + "").split("").map((n) => array[n]).join("")
}

일단 알파벳을 배열로 만들면 인덱스로 바로 접근할 수 있겠다는 생각에 알파벳 전체를 배열로 만들 수 있는 방법을 구글링해서 찾아냈다. 그리고 숫자 형태인 age에 바로 split()을 사용해 봤지만 에러가 나서 숫자를 어떻게 배열로 쪼갤 수 있는지도 찾아봤다. age를 배열로 변환한 후에 여기에 map을 돌려서 각 요소가 array[n]로 변환되도록 했다.

알파벳 소문자 전체를 배열로 만들기

const arr = Array.from({ length: 26 }, (v, i) => String.fromCharCode(i + 97));
console.log(arr)
// ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]

숫자를 문자로 변환 후 배열로 만들기

타입이 숫자(number)인 경우 split을 사용할 수 없기 때문에 숫자에 ''"을 더해 문자로 만들어주고, split(''")을 사용하여 배열로 만들어 주는 방법이다.

function numberToString1(n) {
  return (n + "").split("")
}
numberToString1(151)  // [ '1', '5', '1' ]

출처

https://velog.io/@johnyejin/JavaScript-알파벳-배열-만들기

https://im-designloper.tistory.com/58

다른 사람의 풀이

function solution(age) {
  return age
    .toString()
    .split("")
    .map((v) => "abcdefghij"[v])
    .join("");
}

내 풀이랑 비슷한 방식인데 여기서 배울 점은 굳이 알파벳을 따로 배열로 만들어 줄 필요 없이 문자열 자체로도 인덱스에 접근할 수 있다는 점이다. 알고 있던 사실인데 왜 문제 풀 때는 생각이 안 났는지.. 그리고 숫자를 문자열로 만들기 위해 .toString()을 사용할 수도 있다는 것을 배웠다.

function solution(age) {
    return age.toString().split("").map((n) => "abcdefghij"[n]).join("")
}

다른 사람의 풀이를 참고해서 내 풀이를 이렇게 간결하게 표현할 수도 있다.

문자열 안에 문자열

나의 풀이

function solution(str1, str2) {
    return str1.split(str2).length > 1 ? 1 : 2
}

개인적으로 아이디어가 만족스러웠던 풀이였다 ㅎㅎ str2로 split이 되어서 배열의 length가 2가 되면 1을 반환하고, 아니면 2를 반환한다.

다른 사람의 풀이

function solution(str1, str2) {
    return str1.includes(str2) ? 1 : 2;
}

includes 메서드를 배열뿐만 아니라 문자열에도 쓸 수 있다는 것을 알게 되었다! str2를 포함하고 있는지에 따라 includes 메서드가 true 또는 false를 반환하기 때문에 삼항으로 바로 쓸 수 있다.

회고

오늘은 너무 공부에 집중이 안 돼서 속상한 날이었다. 타입스크립트 공부하기 싫어서 프로그래머스 문제를 좀 풀었다. 알고리즘을 매일 꾸준히 푸니까 점점 다양한 메서드를 사용할 줄 알게 되고 배우는 게 많은 거 같다. 어느새 0단계 40% 달성!

내일은 또 프로젝트 시작이라 얼마나 바쁘고 정신없을지 걱정되기도 하고 팀원들이랑 첫날부터 소통이 매우 잘 되고 있기 때문에 프로젝트 결과물이 기대되기도 한다. 프로젝트를 몇 번 거치며 느낀 점... 가장 중요한 것은 소통이다!

저작자표시