본문 바로가기

전체보기

 (286)
리액트 컴포넌트에 default props 설정 방법 때로는 props에 재사용을 위해서 가변적이지 않은 값을 넣어야할 때도 있다. 그럴 때에는 아래처럼 defaultProps에 property를 설정해준다. function Profile(props) { const { name } = props; return {name} } Profile.defaultProps = { name: 'socratone' }
리액트의 주요한 특징 - 렌더링 렌더 메소드의 아웃풋으로 리액트 엘리먼트가 나오는데 이 엘리먼트는 DOM이 아니고 DOM 엘리먼트를 가리키는 자바스크립트 객체다. DOM보다 가벼워 새로 만들더라도 리소스를 덜 잡아 먹는다. 이를 버추얼 DOM이라고 부른다. 컴포넌트의 state가 바뀌었을 때 새로운 리액트 엘리먼트를 얻게 되고 이전의 엘리먼트와 비교한다. 바뀐 부분이 있다면 DOM의 해당 부분을 업데이트해서 버추얼 DOM과 맞춘다. 단순히 컴포넌트의 state를 바꾸면 리액트는 자동적으로 이에 맞게 변화시켜 주는 원리다. 그래서 이 라이브러리의 이름이 react이기도 하다. 참고 : youtu.be/Ke90Tje7VS0?t=205
React.memo 번역 리액트의 memo는 higer order component다. 클래스에서 사용되는 PureComponent와 비슷하다. React.memo로 렌더링 될 함수 컴포넌트를 감싸주면 마지막에 렌더링된 값을 기억했다가 내려오는 props가 같을 때 렌더링을 건너 뛰고 기억했던 값을 재사용한다. React.memo는 props의 변화만 체크한다. memo로 감싸준 함수 컴포넌트에 useState나 useContext를 사용하면 state나 context가 변할 때에는 다시 렌더링한다. 기본적으로는 props에 있는 객체들을 얕은(shallowly) 방식으로 비교하지만 두 번째 인자를 활용해서 사용자가 원하는 방식으로 비교할 수도 있다. 이 함수는 오직 성능 최적화를 위해서 존재한다. 렌더링을 막기 위한 목적으로 ..
반응형 웹 참고 자료 https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=ko
쓸만한 SASS 기본 기능들 1. 주석 css에서는 // 이 주석을 사용할 수 없지만 sass에서는 가능하다. 2. Nesting 아래처럼 중첩해서 사용할 수 있어 보기도 좋고 코드량도 줄어든다. div { font-size: 20px; div { font-size: 10px; } } 3. 변수 손쉽게 변수를 사용할 수 있다. $login-color: rgb(215, 215, 215); div { background-color: $login-color; } 4. 상위 선택자 .block { &__element { } } 위와 아래는 동일하다. .block { } .block__element { } 5. Import 다른 scss 파일을 가져온다. @import "variables"; // variables.scss 파일의 내용을 가..
리액트에서 SASS 쓰는 방법 1. 다음을 입력해서 리액트 프로젝트를 만든다. npx create-react-app 폴더이름 2. sass를 설치해야 한다. npm install node-sass 3. 이제 다음과 같은 방법으로 scss 파일을 불러올 수 있다. import './App.scss';
CSS position에서 relative와 absolute의 차이 .parent { top: 50px; left: 50px; position: relative; background-color: plum; } .second { top: 50px; left: 50px; position: relative; background-color: bisque; } 자식의 position이 relative인 경우 공간을 차지하지만 .parent { top: 50px; left: 50px; position: relative; background-color: plum; } .second { top: 50px; left: 50px; position: absolute; background-color: bisque; } absolute인 경우 공간을 차지하지 않는다. absolute의 부모 중..
아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법 의 경우 width 속성을 설정해주면 이미지 비율에 따라서 height가 자동으로 설정된다. 때문에 width를 100%로 하면 부모 엘리먼트의 width에 따라 비율을 유지하면서 이미지 크기를 조절할 수 있게 된다. 그러나 은 그렇지 않다. 유튜브 영상을 불러올 때에는 을 사용하고 유튜브 영상의 크기를 반응형으로 조절하려면 다른 방법이 필요하다. 위처럼 #area로 을 감싸서 #area의 크기에 iframe 크기를 맞추는 방법이 있다. 먼저 iframe의 width와 height를 100%로 한다. #area의 padding-bottom에 % 값을 줘서 #area의 가로세로 비율을 조절한다. 유튜브 영상의 비율인 16:9로 하려면 padding-bottom에 56.25%를 넣는다. #area { pos..

티스토리툴바