초보 개발자의 성장 일기

React.memo는 React에서 제공하는 고차 컴포넌트이다. 고차 컴포넌트란? 어떤 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환해준다. 일반의 컴포넌트가 React.momo를 거치면 최적화된 컴포넌트를 반환해준다. 렌더링이 되어야 할 상황에 놓일 때 마다 Props Check를 통해서 자신이 받는 props에 변화가 있는지 확인한다. props에 변화가 있다면 새로 렌더링 되는 것이 아닌, 기존에 렌더링 된 내용을 재사용한다. const Student = ({ name, age, address }) => { return ( {name} {age} {address} ); }; 여기서 Props Check를 하면 name, age, address에 변화가 있으면 재사용하면서 렌더링을 하게 되고 변하지..

여성, 남성 체크박스 중 하나만 선택돼야 하는 난관에 부딪혔다. 둘중에 하나만 선택이 되도록 하려면 어떻게 구현을 해야할까? const [ganderCheckValue, setGenderCheckValue] = useState(''); 우선 useState로 변수를 선언해준다. genderCheck(e)} /> 남성 genderCheck(e)} /> 여성 그리고 각각 input과 label로 구현을 해준다. 여기서 type, id, name, value, onChange를 적어주어야 하며 onChange에는 클릭할 때 서로 하나만 체크될 젠더 체크 함수가 들어갈 것이다. function GendercheckOne(id) { let checkBox = document.getElementsByName('ch..

CSS Module class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없다. 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능하다. 스타일링 직접 하나하나 해야 한다. UI framework (ex. Ant Design, Material UI) 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋다. 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다. 해당 framework의 디자인철학을 벗어나기 쉽지 않다. 컴포넌트들을 커스터마이징 하기 어렵다. import "antd/dist/antd.css"; import { Button } from "antd"; export default function App() { r..

Server Rendering React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드한다. 클라이언트는 별도의 처리 없이 웹페이지를 노출하고 이를 Server Rendering이라고 한다. Client Side Rendering Ajax 등의 기술, 자바스크립트 프레임워크를 활용하여, 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 된다. 데이터는 XML, JSON 형태로 클라이언트에 전송하는데 이를 CSR(Client Side Rendering)이라고 한다. CSR은 자바스크립트만으로 완전히 페이지를 만들 수 있다. 자바스크립트를 최대한도로 활용하여 HTML, CSS를 동적으로 생성한다. 컴포넌트 단위로 코드를 나누고, ..

useReducer는 state를 생성하고 관리하는 도구이다. 그렇다면 state와 차이는 무엇일까? { teacher: 'James', students: ['Kim', 'Ann', 'John']. count: 3, location: [ {count: 'Korea', name: 'A'} {count: 'Australia', name: 'B'} ] } 여러개 하위값을 포함하는 복잡한 state를 다뤄야 할 때 사용한다. 구성요소 Reducer: Action의 내용대로 변경된 state를 업데이트를 해주는 역할을 한다. Dispatch: state를 변경하기 위해 Action을 요구하는것을 말한다. Action: Dispatch의 요구 내용을 말한다. Dispatch(Action) → Reducer(Stat..

코드 테스트가 필요한 경우 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 한다. 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 한다. 코드를 리팩토링하면, 원래대로 동작하는지 테스트한다. 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아진다. 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있다. 언급한 상황들에 대한 테스팅 코드를 작성하여, 미연의 에러를 방지한다. TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상시킨다. 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 된다. 테스트가 용이하게 코드를 작성하여, 코드 품질과 신뢰성을 높인다. 코드가 영향을 미치는 ..

useCallback은 컴포넌트를 최적화 시켜주는 도구이다. useMemo와의 차이점 useMemo: 인자로 콜 백함수를 넣어주면 return 값을 memoization 한다. useCallback: 인자로 전달한 콜백함수 그 자체를 memoization 한다. const calculate = useCallback((num) => { return num + 1; }, [item]) useCallback으로 함수를 감싸주어 함수가 필요할 때마다 메모리에서 가져와 재사용한다. function Component() { const calculate = useCallback((num) => { return num + 1 }, [item]); return {value} } 컴포넌트 객체가 처음 렌더링 될 때만 함수..