하루 기록

결론 : Server Components가 Client Component에게 전달 할 수 있는 값은 한정되어 있다. 에러메세지Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.   {Icon: function y, onClick: undefined} 해결책문제가 생긴 Server Component 상단에 "use client" 를 붙여준다.or 해당 props를 넘겨주지 않도록 구조를 바꾼다. 상황요약: Server..

불필요한 렌더링을 줄이기 위해 사용하는 방법들- React.memo : 컴포넌트 캐싱- useCallback : 함수캐싱- useMemo : 값 캐싱 React.memofunction Box () {     return 박스; }export default React.memo(Box);  ❗함수도 function도 참조형 변수이기에, 만약 아래 예시와 같이 함수를 props로 전달하게 된다면 Parent가 리렌더링될 때 React.memo로 지정한 Box 컴포넌트도 리렌더링이 된다. -> useCallback을 사용하면 렌더링하지 하지 않도록 변경할 수 있다.function Parent () {     const [count, setCount] = useState(5);     const initCount..

useState: 컴포넌트에 state 변수를 추가할 수 있다 (공식 문서)const [state, setState] = useState(initialState);    - initialState : 초기 설정값const [age, setAge] = useState(28);console.log(age); // 28setAge(30); console.log(age); // 30   useEffect: 외부 환경과 같은 생명주기를 가질 수 있다 (공식 문서)useEffect( setup, dependencies? );    - setup : Effect의 로직이 포함된 기능입니다. 선택적으로 정리 함수를 반환할 수도 있습니다.    - dependencies : 값이 변경될 때마다 setup을 실행합니다. ..

순수 함수 : 외부환경에 의존하거나 변경하지 않는 함수비순수 함수 : 외부 환경에 의존 또는 외부 환경을 변경시키는 함수 같은 내용을 행하더라도, 이렇게 보면 다르다.let a = 1;// 순수 함수const sum (num) {    return num + 5;}console.log(sum(a));   // 6// 비순수 함수const sumCopy(){    return a + 5;     // 변수 a에 의존적이다.} console.log(sumCopy());   // 6    같은 행위가 일어나도 외부 환경에 대한 의존성을 낮추기 위해 순수함수와 같이 외부 환경에 의존적이지 않게 짜기 위해 함수형 업데이트를 사용한다. setState는 비동기로 동작하기에 setState 라인에 도착했을 때의 인자..

전통적인 개발 방식의 단점 (html, css, Javascript)1. 유지보수의 어려움2. dom 조작의 비효율성 : 브라우저 렌더링 효율이 좋아짐3. 재사용성 부족  React가 불러온 개발 방식의 변경- Multi Page Application -> Single Page Application: html 을 불러오는 시간 단축 - Server Side Rendering -> Client Side Rendering -- 장점 ; DOM apis 에 대하여 Full Access 를 갖고 있다-- 단점 : 검색엔진 최적화(SEO)에 불리하다    React 프로젝트 만들기1. CRA (Create React App)2. Vite3. Gatsby4. NextJs (프레임워크)  React 주요 개념1. 가..