1. 프로그래머스
완주하지 못한 선수
for 안에 if 안에 includes 안에 splice를 활용했다간 N^4 빅오의 쓴맛을 경험해 볼 수 있으니 주의!
1. .includes()
배열에 사용해주는 메서드로서 하나의 문자열이 다른 문자열에 포함되어있는지를 판별하고 결과를 true 혹은 false로 반환해준다.
2. .pop() / .shift()
베열의 마지막/맨처음 요소를 반환/제거 해준다.
특히 pop 같은 경우 빈 배열에 호출하게되면 undefined를 반환해준다.
3. .splice(배열의 변경을 시작할 인덱스 , 제거할 요소의 수 , '배열에 추가할 요소1' , '배열에 추가할 요소2') /
배열의 기존요소를 삭제 또는 교체 하거나 배열의 내용을 변경해준다.
오늘 문제에선 삭제하는 용도로 활용하였으며
splice함수는 사용시 원본이 수정되니 주의해서 사용해야 한다.
splice함수 사용후 원본에는 제거된 배열이 저장된다.
배열에 추가할 요소에 아무것도 지정하지 않으면 제거의 기능만 수행한다.
4. .indexOf(찾고자하는 데이터, 배열의 시작 번째)
이번 문제에선 배열에 대하여 사용해주었으며 문자열에서도 활용이 가능하다.
배열에서 확인하고자 하는 데이터가 몇번째에 있는지 확인후 있다면 1, 없다면 -1을 반환해준다.
배열의 몇번째에서부터 시작하고자 하는지도 명령이 가능하다.
5. .forEach(요소 값 , 요소인덱스, 순회중인배열)
주어진 콜백 함수를 배열 요소에 각각 실행한다.
오늘 문제에서는 이 함수를 for문을 대신하여 활용하였으며 원하는 값을 얻고난뒤 break와 함께 상용해 주었다.
break 와 같은 예외설정을 해주지 않으면 중간에 멈출 수 없다.
2. 오늘 배운것.
1. useEffect와 의존성 배열
- 화면이 그려진 이후 실행되는것이 useEffect이다.
- 클래스 컴포넌트에 componentDidMount, componentDidUpdate, componentWillUnmount 의 기능을 함수형 컴포넌트 에서 사용 할 수 있게 해주는 훅이다.
- 사용시 useEffect 안에 useState를 쓰게되면 무한히 반복되어 필요 이상이 메모리를 잡아 먹을 수 있으니 주의하여야 한다.
- rest api의 사용시 활용 한다.
2. 생명주기
1. 그리기
render
2. 그리고 난 후
componentDidMount
3.그리고 난 뒤 값이 변경 되었을때
componentDidUpdate
4. 고리고 난뒤 사라질때
componentWillUnmount
완벽이 대체되어 사용된다고 할 수는 없지만 class component의 생명주기를 useEffect를 활용하여 사용 해 줄 수 있다.
3. useRef
js의 DOM을 대체하여 사용 할 수 있게 해주는 훅이다.
특정 태그를 연결하여 컨트롤 하기 위해 사용한다.
3. 기타
재수가 좋게도 주말에 올린 클래스형 컴포넌트와 함수형 컴포넌트를 알아보고 직접 클래스형 컴포넌트의 불편함을 경험해 볼 수있는 수업을 듣게 되었다.
그리고 주말동안 본의아니게 랜딩페이지를 만들며 useEffect를 독학해버렸는데 이것 또한 오늘의 수업내용이였다.
오늘만큼 편한 수업이 있었나 싶다.
