React/React Basic

[React] useMemo와 useCallback

useMemo useMemorize를 줄여 useMemo라고 한다. useMemo는 useEffect가 특정 변수 값이 변경되면 호출되듯 특정 변수 값이 변경되어야만 렌더링이 되게끔 하는 Hook이다. setState가 발생하면 해당 컴포넌트와 하위 컴포넌트가 모두 리렌더링된다. 이 때, 연산을 거쳐 값을 출력하는 경우 값이 바뀌지 않더라도 연산이 리렌더링 마다 발생하게 된다. 불필요한 연산이 발생하는 것이다. 이를 위해 useMemo를 사용해, 함수의 불필요한 호출을 막는다. 단, 렌더링이 이루어지지 않는 것은 아니다. 이는 컴포넌트 최적화가 필요한 부분이다. const userCount = () => { console.log("갱신"); return userList.length; }; return( ..

[React] mount시 실행되는 useEffect

함수형 컴포넌트에서는 플러터의 initState, dispose와 같이 컴포넌트가 생성(mount)되거나 해제(unmount)될 때의 호출을 useEffect를 사용해 구현한다. useEffect는 deps 값을 통해 어떤 경우에 동작할 것인지 정할 수 있다. 1. 컴포넌트가 mount 되는 최초 1회 useEffect(() => { console.log("init"); return () => { console.log("dispose"); }; }, []); return을 통해 unmount가 될 때 동작하는 dispose를 구현할 수 있다. 맨 뒤의 deps에 빈 배열을 넣어주면 최초 1회만 동작한다. 2. 특정 값이 바뀌는 경우 & mount시 useEffect(() => { console.log('..

[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 = ..

[React] 컴포넌트간 props 전달

일반적인 Props 컴포넌트 간 전달되는 매개변수를 props라 한다. 일반적으로 아래와 같이 선언하고 전달할 수 있다. //호출 //컴포넌트 (반드시 대문자) const Container = (props) => { return {props.name}; }; 태그 사이의 내용 children my name is const Container = (props) => { return {props.children + " " + props.name}; }; 비 구조화 할당 (props를 세분화) my name is //방법1 const Container = ({name, children}) => { return {children + ' ' + name}; }; //방법2 const Container = (prop..