JAM Development

ReactJS에는 memo라는 유용한 기능이 있다. 만약 커스텀 버튼을 여러개를 생성 하고 클릭을 할경우, 특정 버튼의 이름이 변경되는 함수가 있다. 특정 버튼의 이름이 변경되는 작업을 할 때, 브라우저에서는 매번 새로운 렌더링을 통해 다시 컴포넌트를 그리는데 이러한 작업은 경우에 따라 서비스를 매우 느리게할 수 있는 중요한 문제점으로 인식된다. 해당 문제점을 해결 하기 위해서 ReactJS에서는 변경이 필요하지않은 컴포넌트는 다시 그리지 않고 변경된 컴포넌트만 다시 그리는 작업을 해주는 함수가 React.memo 라는 함수이다. function Btn({ text, onChangeValue }) { console.log(text, "이 렌더링되었습니다."); return ( {text} ); } .....

flex의 경우, 주축을 기준으로 다양한 옵션을 설정할 수 있지만 grid에 비해 많은 제한사항이 있다. 물론 주축을 기준으로 위치를 설정할때는 justify-content, 교차축을 기준으로 설정할때는 align-items가 있고 서로 같은 옵션의 파라미터를 공유하고 대상의 주축 기준에 따라 엘리먼트의 위치가 변경된다. 1. grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns는 요약하면 " 열 = width = 넓이 = 가로 " 단어로 설명할 수 있다. ㅇ 2. grid-template-rows: 1fr 1fr 1fr 1fr;