TIL_230124_Typescript 공부

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. 프로그래머스 JS

Lv0. 문자열 뒤집기

• 풀이

1. 문자열 순서 바꾸기

2. 하나의 문자열로 합치기

   ---

문제 및 해결

• 순서를 반대로 해서 출력은 했는데 하나로 합쳐지지 않음
  • 하나씩 반대로 나온 문자를 배열에 넣어 출력하면 이렇게 나온다.
    
• 해결
  • join() 활용
  • 뒤집어진 순서를 빈 배열에 넣고 join으로 결합하기
  • join()메서드는 배열의 모든 요소를 문자열로 결합한다.

function solution(my_string) {
    let a = []
    for(let i=1; i<=my_string.length; i++){
    let reverseA = (my_string[my_string.length-i])
        a.push(reverseA)
    }          
return a.join("")
}

---

• 다른 풀이
  return my_string.split('').reverse().join('');
  • 이렇게 한 줄로 끝낼 수도 있다..!
    var answer = [...my_string].reverse().join("");
  • split 문법!

---

2. React Udemy 강의

Typescript + React - todolist

알게 된 것

• FC(functional component)

  • 함수형 컴포넌트라고 타입을 지정함으로써 props가 객체라는 걸 알려줄 수 있다.
    
  • 새롭게 만드는 컴포넌트들에 props를 정의 해주기(제네릭)
    const Todos: React.FC<{ items: string[] }> = (props) =>

• Ref 사용
  const todoTextInputRef = useRef<HTMLInputElement>(null);

  • input과 연결되었다는 걸 알려주기 위해 타입을 지정
  • ref에 다른 값이 할당되어 있을 수도 있어서 초기값도 지정해줘야 함

• !(exclamation mark)

  • 해당 값이 반드시 존재할 때만 사용
    
  • 옵셔널 체이닝('?')과 달리 해당 값이 반드시 존재하니 존재하는 값을 가져오라는 것
  • ?를 사용했을 땐 enteredText가 string|undefined로 나옴

• concat()

  • 스프레드 대신 기존 배열을 건드리지 않고 새로운 배열 생성
    

• bind()

  • Todos.tsx
    
  • App.tsx에서 받은 onRemove 함수가 TodoItem.tsx에서도 쓰이는데 TodoItem.tsx에서도 id: string으로 타입을 지정하는 대신 bind() 메소드를 통해 실행할 함수를 미리 설정할 수 있다.
  • 첫 번째(this) - 호출되는 함수 안에서 무엇을 가리키는지 적어줌. 여기서는 중요하지 않으니 null값을 넣어준다.(this를 넣어도 됨)
  • 두 번째에 들어가는 게 이 함수가 받는 매개변수(인자)