내가 보려고 만든 개발 공부 일지

앱이 커질수록 상태변수도 많아질 것이고, 일일이 갱신해주는 코드도 많아져서 상태관리가 힘들고 소스가 난잡해질 것이다. 이런 상황에서 useReducer 는 상태들을 한곳에 모아놓고 관리할 수 있게 해주는 훅이다. 예제 ) const initialState = { userInfo : ~ , userList : ~ }; function reducer(state, action){ ---> C switch(action.type){ case 'CHANGE_INPUT': return { ...state, userInfo : { ...state.userInfo, [action.name] : action.value } }; default: break; } } function App(){ const [state, dis..

1. useState의 반환값 useState 는 길이 2짜리 배열을 리턴하는데 각각 상태변수, 상태변수 settet함수 이다. 그래서 보통 사용할땐 배열의 비구조할당을 이용해 변수에 할당한다. var [num, setNum] = useState(1); 위 코드에서 num 은 1 로 초기화되고 setNum함수로 num 값을 갱신해줄 수 있다. 값 갱신 : setNum(num + 1) --> num 값이 달라졌으므로 리렌더링이 발생한다. 2. 상태변수가 객체, 배열같은 참조값일때 만약 const [obj, setObj] = useState({ name : "kks", birth : "93" }); 처럼 상태변수의 초기값이 객체인 경우,(참조값을 가지는 변수 = 배열, 객체) obj.name = "kks" ..

1. 훅은 오직 리액트 함수 내에서만 사용되어야 한다. 일반적인 js 함수에서는 호출하면 안된다. 2. 리액트 함수 최상위에서 호출해야 한다. -> 반복문, 조건문, 중첩된 함수 내에서 hook을 호출하면 안된다. useState 나 useEffect 같은 훅들이 여러 번 사용될 수 있는데, 리액트는 이 훅들을 호출되는 순서대로 저장해 놓는다.(=LinkedList) 그래서 매 렌더링마다 순서대로 훅을 호출할 수 있는것이다. 근데 만약 조건문이나 반복문안에서 훅을 썻다고 해보자, 그럼 훅이 어떤 조건에따라 실행되지 않을 수 있다. 그럼 렌더링 때마다 맨처음 함수가 실행될때 리액트가 기억해놓은 훅의 호출 순서가 꼬여서 실행될 것이고 결국 버그를 초래할 것이다. 이게 항상 리액트 함수 최상위 레벨에서만 훅을..

어떤 컴포넌트 사이에 다른 컴포넌트를 넣으면 그 컴포넌트의 props.children에 사이에 들어간 컴포넌트들이 담겨져 온다. ex) function Wrapper({children}){ // 컴포넌트 사이에 들어온 다른 컴포넌트들은 props.children 에 할당됨 var style = { border : "2px solid blue", padding : "20px" } return ( {children} ); } 위 예제를 보면 Wrapper 사이에 Hello 컴포넌트들이 들어가있는데 이 Hello들은 Wrapper의 props.children 으로 가져올 수 있다.