몇개 알아듣는걸로 쓰고 있어.. 정말..힘들당 하지만 교수님이 잘 가르쳐줘서 힘을 내보려고행
TODO.
참고
컴포넌트가 언마운트될 때 cleanup 함수에서 현재 상태변수를 참조하기 위해서는 useRef 훅을 사용해야 함
useRef
함수형 컴포넌트에서 DOM 요소를 직접 제어하기 위해서 사용
ref 속성(attribute)와 useRef 훅을 사용해 HTML DOM 노드와 JavaScript 코드를 연결
useRef 훅은 current 프로퍼티를 가지는 객체를 반환
DOM 요소 직접 제어
숫자를 입력할 수 있는 입력창과 입력한 숫자를 등록하는 버튼을 제공
숫자를 입력하면 입력한 숫자가 표시되고, 등록 버튼을 클릭하면 등록된 숫자들을 리스트로 출력하고 입력창에 내용을 지우고 포커스를 이동
App.js
import Average from "./Average";
export default function App() {
return <Average />;
}
Average.js
import { useState, useRef } from "react";
export default function Average() {
const [list, setList] = useState([]); // 등록된 숫자 리스트
const inputRef = useRef(null); // 입력창에 대한 Ref
// 숫자를 등록하는 함수
const handleRegister = () => {
const value = inputRef.current.value; // 입력창의 값 가져오기
if (value === "") return; // 빈 값 처리
setList([...list, parseFloat(value)]); // 숫자 리스트에 추가
inputRef.current.value = ""; // 입력창 초기화
inputRef.current.focus(); // 포커스 이동
};
return (
<>
<div>
<input
type="number"
placeholder="숫자를 입력하세요"
ref={inputRef} // ref로 DOM 요소 연결
/>
<button onClick={handleRegister}>등록</button>
</div>
<div>
<p>입력값: {inputRef.current?.value || ""}</p>
</div>
<div>
등록된 숫자
<ul>
{list.map((num, index) => (
<li key={index}>{num}</li>
))}
</ul>
</div>
</>
);
}
Average.js 교수님꺼
import React, { useRef, useState } from "react";
export default function Average() {
const [number, setNumber] = useState("");
const [list, setList] = useState([]);
const changeNumber = e => setNumber(e.target.value);
const changeList = () => {
const newList = list.concat(number); // [...list, number]
setList(newList);
setNumber("");
refNumber.current.focus();
};
// const refNumber = React.createRef();
const refNumber = useRef();
return (
<>
<div>
<input ref={refNumber} type="number" value={number} onChange={changeNumber} />
<button onClick={changeList}>등록</button>
</div>
<div>
<p>입력값: {number}</p>
</div>
<div>
등록된 숫자
<ul>
{
list.map((n, i) => <li key={i}>{n}</li>)
}
</ul>
</div>
</>
);
}코드 설명
useRef로 DOM 요소 제어:
inputRef를 통해 < input> 요소에 접근합니다.
inputRef.current.value로 값을 가져오고, 초기화 및 포커스 이동.
숫자 등록 기능:
입력값을 가져와 list 상태에 추가.
빈 입력값 방지 로직 추가.
리스트 출력:
list.map을 사용하여 등록된 숫자들을 < ul>에 렌더링.
입력창 초기화 및 포커스 이동:
등록 후 입력창을 비우고, focus를 다시 이동시켜 사용자 경험 개선.실행 결과
입력창에 숫자를 입력.
"등록" 버튼을 누르면 입력값이 리스트에 추가되고 입력창이 비워지며 포커스가 이동.
리스트에 등록된 숫자가 계속 추가됨.
useRef는 태그를 핸들링하며, current라는 속성을 가진 객체를 반환하여
DOM 노드와 JavaScript 코드를 연결해준다.태그를 핸들링할수 있다. useref hook을 사용해서 노드와
자스 코드를 연결해주는거야.. 커런트라는 속성을 갖고있는 객체를 반환하는거얌컴포넌트가 언마운트될 때만 cleanup 함수가 실행되도록 하고 싶으면 의존성 배열에 빈 배열을 설정 ...공부중이야
언마운트될때 네임의 값을 가져오고 싶어... 그럴떈 user.ref써야된당~TODO
강의는 4주 다시보기 제공이 가능 교육기간동안 안내사항을 오픈채팅방에서 전달할 예정이니 교육이 끝날 때까지 현 단톡방 유지
개발자들 사이에서 많이 사용되는 다이어그램 작성 도구 3가지를 소개해드리겠습니다:
PlantUML
설명: 텍스트 기반으로 UML 다이어그램을 생성할 수 있는 도구로, 코드와 함께 다이어그램을 관리할 수 있어 버전 관리에 용이합니다. 다양한 IDE와의 통합이 잘 되어 있어 개발자들이 선호합니다.
웹사이트: plantuml.com
diagrams.net (구 Draw.io)
설명: 직관적인 드래그 앤 드롭 인터페이스를 제공하며, GitHub, GitLab 등과 연동하여 프로젝트 내에서 다이어그램을 관리할 수 있습니다. 오프라인 및 온라인에서 모두 사용 가능해 유연성이 높습니다.
웹사이트: diagrams.net
Graphviz
설명: DOT 언어를 사용하여 복잡한 그래프와 네트워크 다이어그램을 생성할 수 있는 오픈 소스 도구입니다. 스크립트 방식으로 다이어그램을 작성할 수 있어 자동화된 문서 생성 등에 유용합니다.
웹사이트: graphviz.org
이 세 가지 도구는 개발자들이 코드와 통합하여 다이어그램을 관리하거나, 자동화된 방식으로 시각화를 할 때 많이 활용됩니다. 각 도구의 특징을 고려하여 프로젝트와 작업 스타일에 맞는 도구를 선택하시면 좋을 것 같습니다.
추가 +) https://excalidraw.com/
https://lucid.app/documents#/home?folder_id=recent
https://graphviz.org/gallery/
만들어본거야
React.StrictMode
. 클래스 컴포넌트의 constructor . 클래스 컴포넌트의 componentDidMount . 클래스 및 함수 컴포넌트의 render . 함수 컴포넌트의 useEffect 클린업 및 실행
