강의 내용
React 학습
-
font사용법 1
-
npm i @fortawesome/fontawesome-free
-
(https://www.npmjs.com/package/@fortawesome/fontawesome-free?activeTab=readme)
-
font사용법 2
-
1.구글폰트 검색 - link 복사
-
2.리액트 src/assets/font 폴더 아래에 폰트별 Jsx 생성(<>링크넣기</>)
-
3.css파일에 해당 폰트 - CSS rules to specify families 넣기
주의 :
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin = "true" />
이렇게 넣어야 에러메시지가 뜨지 않음.
![[Pasted image 20240201113540.png]]
삭제하기-필터사용!!
- 필터를 사용한다는건? 얕은복사본을 생성한다는 것! -> 둘이 같은 주소값을 참조한다는 것!! -> 둘 중 하나가 수정되어도 원본도 바뀐다!!
- 필터된 값만 넘겨서 처리할 수도 있음(꿀팁이다..)
<Navbar totalCount={items.filter(item=>item.count>0).length} />얕은복사 vs 깊은복사??
얕은복사 참조값(주소) 복사 -> 같은 주소지를 쓰니까 원본이나 복사본을 변경하면, 다른 객체 또한 변경
깊은복사 원본 -> 새롭게 하나 복사해서 생성
입력하기-Form & submit 사용!!
- fom태그에 입력할 값들을 받고, 입력이 완료되었을 때, onSubmit을 통해 보낼 수 있다.
- 입력하는 그 영역을 formRef로 이름을 정함.
- 해당 태그 입력 후
import React from 'react'
const AddForm = (props) => {
const formRef = React.createRef();
const inputRef = React.createRef();
const onSubmit = (e)=>{
e.preventDefault(); //브라우저 기본기본 막아주기(새로고침 방지)
const name = inputRef.current.value;
name && props.handleAdd(name); // 추가
formRef.current.reset(); // 폼 태그 정보 청소 시 사용!!
}
return (
<>
<form ref={formRef} className='add-for' onSubmit={onSubmit}>
<input ref={inputRef} type="text" className='add-input' />
<button className='add-button'>Add</button>
</form>
</>
)
}
export default AddForm최상위에서부터 props로 변수, 함수, 핸들함수 등을 보낼 수 있지만 깊이가 깊어지면 이동하는 것이 많아진다.
그러니 오늘 추가적으로 리덕스를 학습해보기로 하였다.
리덕스
![[Pasted image 20240201204951.png]]
리덕스 왜 쓰나?
- 요 몇일의 실습에서도 함수, 변수를 컴포넌트간 이용하기 위해서 Props에 담겨 이동하는 것을 확인할 수 있었다.
- 그리고 그 방향은 상위->하위만 가능하다는 한계가 있었고, 반대의 방향으로 값을 올리기 위해선 상위에서 만든 핸들함수를 전달하여 상태를 관리해야하는 번거로움이 있다.
- 이런 것을 리덕스를 통해 관리하여 적재적소에서 필요할 때 사용할 수 있도록 한다!!
- 리덕스 사용 팁 : 만약 value를 여러개를 한 번에 관리하고 싶으면??
initialState:{
value :0,
number:0,
list:[],-
리덕스 구조가 뭐가있나?
-
1. 액션 타입(Action Types):
-
역할: 액션 타입은 액션을 식별하는 문자열 상수입니다. 액션에 대한 유일한 식별자로 사용됩니다.
-
왜 사용하는가?: 리덕스에서는 액션의 타입을 통해 어떤 종류의 액션이 발생했는지를 판단하고, 리듀서에서 해당 액션에 대한 상태 변경을 수행합니다.
-
2. 스토어(Store):
-
역할: 스토어는 애플리케이션의 상태를 담고 있는 객체입니다. 스토어에는 액션에 의해 변경된 상태가 저장되어 있습니다.
-
왜 사용하는가?: 애플리케이션의 상태를 중앙에서 효율적으로 관리하고, 상태 변경에 대한 알림을 받아 컴포넌트들이 업데이트될 수 있도록 합니다.
-
3. 리듀서(Reducer):
-
역할: 리듀서는 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다. 리듀서는 순수 함수로 작성되어야 합니다.
-
왜 사용하는가?: 리듀서는 액션에 따라 상태를 어떻게 변경할지 정의하고, 불변성을 유지하면서 새로운 상태를 생성합니다.
한 마디로 액션 타입은 액션의 종류를 식별하는 열쇠 🔑,
스토어는 애플리케이션의 상태 저장소 💾,
리듀서는 상태를 업데이트하는 작업장 🛠️
