📅 학습 일자 : 22. 12. 09
📜 진행 내용
- [강의] 리액트 숙련 1 ~ 6 수강
- [특강] React 심화과정 _ Redux
- [과제] 알고리즘 문제 풀기
- [자습] 리액트 강의 - 유데미 Chapter 3 복습
💡 배운내용
▣ 알고리즘 문제 풀기
■ Set
- 정의
- 중복된 값은 제외하고 유일한 값만 담아, 유사배열 형태로 반환하는 생성자 함수
- 원시 값, 객체 참조 등 자료형에 관계 없이 저장할 수 있다.
- 생성 : new Set ( )
- 메서드 : add, delete, has, size
- has 는 값의 포함여부 체크, size는 배열의 length와 같은 역할
👉 new Set도 전개복사, Array.from으로 배열 전환이 가능하다!
예제)
// 1
let mySet = new Set( );
mySet.add(1, 5, 5) // Set(1, 5)
// 2
let my_string = "people"
let c = [...new Set(my_string)].join('') // 'peol'
▣ 리액트
■ State와 props
- 공통점
- 둘다 일반 자바스크립트 객체이며, 렌더링 결과물에 영향을 주는 정보를 갖고있다.
- 차이점
- props는 함수의 매개변수처럼 컴포넌트에 전달되지만, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다.
- props는 함수의 매개변수처럼 컴포넌트에 전달되지만, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다.
■ State (상태) 끌어올리기
- 리액트에서는 기본적으로 단방향 (부모 → 자식, 하향식 데이터 흐름) 데이터 흐름을 갖는다. 그렇기 때문에, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태나 타입이 무엇인지만 알 수 있다. 즉, 하위 컴포넌트가 전달받은 데이터가 state인지 직접 입력한 내용인지 알 수 없는 것이다.
- 상위 컴포넌트의 ‘상태 변경 함수’ 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다.
- 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 경우가 있다. 이 경우 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다.
- 다른 컴포넌트 간에 존재하는 state를 동기화시키려고 하는 것보다, 하향식 데이터 흐름을 지키는 것을 권장한다.
예제)
- 부모와 자식 컴포넌트가 하나씩 존재하는 트리 구조에서, 상태를 변경시킬 수 있는 메서드가 존재한다고 가정해보자.
import { useState } from 'react';
export default function ParentComponent() {
const [value, setValue] = useState('바꿀값');
const handleChangeValue = () => {
setValue('달라진 값');
}
return (
<div>
<div>값은 {value} 입니다.</div>
<ChildComponent />
</div>
)
}
function ChildComponent() {
const handleClick = () => {
// 이 버튼을 이용해 부모의 상태를 바꿔보기.
}
return <button onClick={handleClick}>값 변경</button>
}-
부모 컴포넌트에서 상태를 변경하는 함수는 handleChangeValue이며, 전달은 props로 한다.
※ 전달할 때 handleButtonClick라는 함수 이름은 자식 컴포넌트에서 사용할 이름이다.
function ParentComponent() {
const [value, setValue] = useState('바꿀값');
const **handleChangeValue** = () => {
setValue('달라진 값');
}
return (
<div>
<div>값은 {value} 입니다.</div>
<ChildComponent **handleButtonClick={handleChangeValue}** />
</div>
)
}-
자식 컴포넌트에서는 고차함수에서 인자로 받은 함수를 실행하는 것 처럼,
props로 전달받은 함수를 컴포넌트 내에서 실행할 수 있게 된다.
다음의 상태변경함수 handleButtonClick( ) 은 버튼을 클릭했을 때, 콜백함수로 실행된다.
function ChildComponent({ **handleButtonClick** }) {
const handleClick = () => {
// 인자로 받은 상태 변경 함수를 실행
**handleButtonClick()**
}
return <button onClick={**handleClick**}>값 변경</button>
}👉 브라우저 실행 이미지
🎯 문제와 해결
- 해야할 공부가 산더미지만, 마음만 급하고 제대로 소화시키면서 따라가지 못하는 기분이었다. 이런 상황에서, 같은 팀원분들이 도움되는 조언을 전해주셨다. 마음이 지쳐가던 차라, 진심으로 고마움을 느꼈다.
- 리액트를 공부하고 있는 시점에, 어려움을 느낀다면 그 어려움이 자바스크립트가 약해서 어려운건지 아니면 리액트 자체가가 어려운 것인지 잘 구분하라.
- 과제로 주어지는, 혹은 프로젝트를 진행할 때 필요한 코드들을 조립해서 완성하는 것은 틀린 방법이 아니다. 필요한 부분을 잘 검색해서 답을 찾을 능력을 갖추면 된다.
- 이 말을 들으니 이 전에 드림코딩에서 들었던 조언이 생각났다. 이 세상에는 나에게 필요한 모든 리소스가 존재한다. 단지 아직 내가 찾지 못한 것 뿐이다. resourceful한(지략이 풍부한) 사람이 될 것.
⁉️ 어려웠던 내용
- state
❎ 한 번 더 공부할 내용
- 리덕스
🔗 출처 및 참고자료
codesign