수정 완료 버튼 구현시
기존에는 수정 완료 버튼을 구현할 때, store에 있는 editable이라는 기능으로 구현하려고 했었다.
editable =true일때는 수정중이라서 완료버튼이 뜨고, 입력창이 뜨고 editable= false일떄는 수정 버튼이 뜨는 방식
하지만 이럴 경우 모든 data에 editable이라는 값이 쌓이고, 이것을 store에 저장하게 된다. 따라서 리소스를 많이 차지한다.
const [isEditMode, setIsEditMode] = useState(false);아래와 같이 isEditMode라는 기능을 만들고, 초기엔 false 수정버튼을 누를때 true로 바꾸고, 수정 버튼을 다시 완료버튼으로 보이는 방식으로 바꾸면 해당 component내에서 활용하는 변수기 때문에 리소스를 더 적게 먹는다
<StBody>
{isEditMode ? (
<>
<Textarea
name="content"
rows="10"
maxLength={200}
value={updatedRecord}
onChange={(event) => {
setUpdatedRecord(event.target.value);
}}
/>
</>
) : (
<div>{record?.content}</div>
)}
<StButtonGroup>
{isEditMode ? (
<div>
<button onClick={onEditdableHandler}>저장</button>
<button
onClick={() => {
setIsEditMode(false);
}}
>
취소
</button>
</div>
) : (
<button
onClick={() => {
setIsEditMode(true);
}}
>
수정
</button>
)}
</StButtonGroup>
</StBody>
------------------------------
json 서버를 이용해서 localhost3001을 서버처럼 활용을 했었다.
이때 localhost3001은 원래 비어있는데, 코드를 수정하는 과정에서 값을 localhost:3001/records 가 아닌 3001에서 받으려 했었다. 이럴 경우 get으로 아래와 같은 data를 받아온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>깨달은 점 : 기능이 작동 안 하는 데에는 거창한 이유보다 ,사소한 실수가 더 많다.
'TIL > 항해산 TIL' 카테고리의 다른 글
| TIL 41일차 modal 에러 해결- 추후 알아봐야 할 듯 (0) | 2023.01.14 |
|---|---|
| TIL - 40일차 Button 컴퍼넌트 만들기 (0) | 2023.01.14 |
| 38 내 페이지의 edit 기능 구현하기 (0) | 2023.01.11 |
| 37일차 react로 페이지 만들기 2일차 -옵셔널 체이팅 (0) | 2023.01.10 |
| 36일 TIL React로 만든 나의 ~~ 사이트 1일차 (0) | 2023.01.09 |