오늘 새로 배운 것
전역 state와 지역 state 관리
- 전역 state -> store에 있는
- 컴포넌트 state -> 컴포넌트 안에
모든 state가 store에서 관리된다? No!!
지역 state도 있을 수 있다.
화면이 렌더링되게끔 알려주는 변수. state 바뀌면 렌더링.
작은 컴포넌트에서 렌더링 필요하면 그냥 그 컴포넌트 안에도 있을 수 있는 것.
state가 바로 밑 컴포넌트까지만 간다? 관리하기에 따라 지역 state도 쓸 수 있음.
그렇다면 store의 개념이 왜 나왔냐? 규모가 커지면 기존의 방법으로 state 관리하기 어려우므로.
react-router-dom의 Link
Link는 훅(hook)이 아니다. 하지만 기존 a 태그의 기능을 대체하는 API이다.
JSX에서 a태그를 사용해야한다면 a태그 대신 반드시 Link를 사용해서 구현해야한다.
왜냐면 a태그는 페이지 이동하면 새로고침되기 때문에 리렌더링되고 redux나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화되기 때문이다. 이는 성능에 악영향을 줄 수도 있고 불필요한 움직임이다.
react-router-dom의 useParams
URL에 포함되어 있는 key, value 형식의 객체를 반환해주는 역할.
예를 들어,
/test/3의 주소로 이동한 경우 params:>{id:'3'}을 확인할 수 있고 /test/something으로 이동한 경우 params:>{id:'something'}을 확인할 수 있다.
color picker를 활용하자
파일 만들고 파일 이름에 case 바꾼 뒤 push하면 vercel deploy error 발생
문자 <-> 숫자
문자에서 숫자로 만들어줄 때는 parseInt(),
숫자에서 문자로 만들어줄 때는 toString()
묵시적 형변환
문자형 앞에 '+'를 붙이면 묵시적으로 형변환해서 숫자형으로 바뀐다.
문자형 뿐만아니라 boolean, 배열, 딕셔너리도 가능하다. 딕셔너리는 단 0이 아닌 NaN로 값이 바뀐다.
주말에 해결못한 막힌 부분을 chatGPT에게 물어봤다.
Q1. how to replace useState hook with react-redux when I program something with react library?
A1.To replace the useState hook with react-redux when working with the React library, you can use the useSelector and useDispatch hooks from the react-redux library.
Here's an example of how you can use these hooks to replace the useState hook:
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
function MyComponent() {
const someState = useSelector(state => state.someState);
const dispatch = useDispatch();
function handleClick() {
dispatch(someAction());
}
return (
<div>
<p>{someState}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
In this example, the useSelector hook is used to retrieve the someState value from the Redux store, and the useDispatch hook is used to dispatch a Redux action when the button is clicked.
Q2. I put some text into an input tag and let an action get that text as a payload with dispatch method. but reducer didn't recognize that text as the payload and return 'undefined'. what should I do if I want reducer to return the text and print on the screen?
If you want the Redux reducer to return the payload of an action and print it on the screen, there are a few steps you need to follow:
Make sure that the action that you are dispatching has the correct type and payload. In your code, you should dispatch the action with the dispatch function, and pass the payload as an argument to the action.
For example:
dispatch(someAction(text));In the Redux reducer, make sure that you are handling the action type that you are dispatching, and that you are returning the payload from the action in the state.
For example:
const initialState = {
text: ''
};
function reducer(state = initialState, action) {
switch (action.type) {
case 'SOME_ACTION':
return {
...state,
text: action.payload
};
default:
return state;
}
}In your React component, use the useSelector hook from the react-redux library to retrieve the text value from the Redux store, and use it to display the text on the screen.
For example:
import React from 'react';
import { useSelector } from 'react-redux';
function MyComponent() {
const text = useSelector(state => state.text);
return (
<div>
<p>{text}</p>
</div>
);
}By following these steps, you should be able to dispatch a Redux action with a payload, and use the reducer to return the payload and display it on the screen in your React component.
예상보다 AI의 설명이 자세하고 친절하게 예시 코드까지 이렇게 보여주는게 놀라웠고 앞으로도 유용하게 사용할 수 있을 것 같다는 생각이 들었다. 하지만 한편으로는 학습한 데이터들을 바탕으로 내놓는 답이기 때문에 코드의 품질은 보장할 수 없으니 이부분은 참고해서 이용해야할 것 같다.
결국 막힌 부분은 오늘 다시 공부를 하면서 시행착오 끝에 해결했다.
하루를 돌아보며...
막혔던 부분들은 어느 정도 해결이 되었고 이제 수정 기능 구현하고 CSS 적인 부분이나 커스텀 버튼 등 필요한 부분 좀 수정하고 과제를 마무리하려고 한다. 수정기능에서 다시 막혀서 또다시 이전 강의, 특강, 강의자료 다 뒤져가면서 여러 시행착오를 겪고있다. 아직 redux나 router의 세부적인 내용들을 다 습득하진 않았지만 어느 정도는 흐름이 눈에 들어오는 것 같다.
