useRef

[React] List를 컴포넌트로 렌더링

리액트에서는 state에 관련있는 모든 변수에서 불변성 유지가 상당히 중요하다. 단일 Object의 경우 추가에도 수정에도 speard(...)를 사용했지만 List의 경우에는 speard와 더불어 filter와 map을 주로 사용한다. List useState의 추가, 수정, 제거 //객채의 id를 ref로 사용한다. const nextId = useRef(1); //user를 담는 List const [userList, setResult] = useState([]); const [text, setText] = useState({ id: nextId.current, nickname: "", realname: "", isActive: false, }); const onChange = (e) ... //i..

[리액트] Ref에 관하여 (useRef)

ref란 특정 DOM요소에 일종의 ID를 부여하는 것이다. ref 없이 구현할 수 있는 기능이라면 코드의 유지보수를 위해 ref 사용을 권장하지 않는다. ref를 꼭 사용해야하는 경우는 '특정 input에 포커스 부여', '스크롤 박스 조작', 'Canvas에 그리기' 등이 있다. 그리고 다른 컴포넌트 클래스의 하위 함수를 참조 할 수 있으나, React의 기본 원칙은 부모 컴포넌트와 하위 컴포넌트 사이에서만 데이터를 교류하는 것이기에 ref를 사용해 외부 컴포넌트의 함수를 참조하게 되면 스파게티 코드가 될 수 있다. 대신 context API나 리덕스를 사용하는 것이 효율적이다. 클래스형 컴포넌트에서의 ref 선언 { this.nameInputBox = ref; }}> 혹은 nameInputBox = ..