29 Jan 2021
|
React
-
Pure Component
- shoudComponentUpdate() 혹은 React.memo()를 남용하게 되면 성능 저하가 우려될 수 있다
- PureComponent는 shoudComponentUpdate() 혹은 React.memo()를 호출하지 않아도 지가 알아서 바뀐 부분만 check를 해주는 명석한 녀석이다
- 클래스 컴포넌트를 생성할 때 보통 Component를 상속받아서 사용하지만 PureComponent는 이름 그대로 PureComponent를 import하고 extends하면 된다
-
Rendering adjacent JSX element
- 클래스 컴포넌트든 함수 컴포넌트든 return을 할 때에는 최상위 태그로 감싸야한다고 배웠다
- 하지만 편법은 존재하기 마련
- 배열을 이용하여 여러 줄의 태그를 rendering 할 수 있다
- 당연히 key값도 넣어주어야한다
class xxx extends Component {
render() {
return [
<p>11</p>
<h1>22</h1>
<input>33</input>
];
}
}// 이런 식으로 배열을 이용하여 div로 감싸지 않고도 렌더링이 가능
- 아니면 컴포넌트를 이용하는 방법이 있다
- Windows는 Aux 라는 이름이 충돌할 수 있으므로 주의
const aux = props => props.children;
export default aux;
// 다음과 같이 aux 컴포넌트를 준비하고
render() {
return {
<Aux> // Aux 컴포넌트로 감싸준다
<p>11</p>
<h1>22</h1>
<input>33</input>
</Aux>
};
}
- 위에서 설명한 컴포넌트의 기능을 그대로 하는 내장 컴포넌트가 있다
- Fragment
render() {
return {
<React.Fragment>
<p>11</p>
<h1>22</h1>
<input>33</input>
</React.Fragment>
};
}
-
prop-types package
- prop type을 관리해주는 패키지가 있다
- 컴포넌트를 배포하거나 협업을 하면서 잘못된 자료형의 prop을 사용하는 것을 막을 수 있다
- npm install –save prop-types
- 잘못된 자료형을 입력하면 console창에 error가 뽝 뜬다
import PropTypes from 'prop-types';
propName.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
click: PropTypes.func,
}
// 이와 같이 사용한다. 대소문자 주의.
참고 자료
reactjs.org - 공식홈페이지
Udemy - React The Complete Guide
29 Jan 2021
|
React
React.js Debugging
-
Syntax Error
- 문법상의 오류는 바로 에러가 뽝 뜨면서 브라우저가 에러로 꽉 차기때문에 바로 알기 쉽다
- 반면 에러 없이 작동은 되는데 내가 원했던 기능이 안먹는경우는 로직이 어딘가 꼬였을 확률이 높다
-
Logical Error
- 크롬의 Dev tool을 이용하여 디버깅을 할 수 있다
- Source 탭의 에러가 났을 파일의 라인을 클릭하여 break point를 잡는다
- 이 부분이 실행이 되면 화면이 paused 되고 해당 내용을 살펴볼 수 있다
- 예를 들어 this.state.id === id 라는 부분의 state가 뭔지 id가 뭔지 등등?
-
React Developer Tools
- 크롬 확장 프로그램인 React Developer Tools
이건 뭐 거의 필수이니깐- 컴포넌트를 뜯어서 볼 수 있고 자체적으로 수정한 모습도 브라우저에서 확인을 할 수 있다
-
Error Boundary
- Error 발생시 메세지를 출력하는 컴포넌트를 만들어서 에러가 발생할 확률이 높은 element를 감싸준다.
참고 자료
reactjs.org - 공식홈페이지
Udemy - React The Complete Guide
29 Jan 2021
|
로그포스
2021-01-29 TIL
- 오늘 한 것
- 리액트 공부 - React-The Complete Guide - 기본적인 디버깅 방법과 Life Cycle 메소드와 함수 컴포넌트에서 hook을 이용한 life cycle 효과, Multiple Tags를 렌더링하는 방법, prop-type을 관리해주는 패키지 등 정말 많은 내용을 배웠고 선행학습으로 배웠던 것 이외의 것들이 많아서 초집중이 필요하다.
- 학원 비대면 수업(15:30~22:00)
- 내일 할 것
- 리액트 공부 - React The complete Guide
- 학원 비대면 수업(15:30~22:00)
어렵다하면 어려운 거고 그래서 재밌다하면 재밌는 거고
오늘의 한 줄 총평 : 즐기자 리액트
28 Jan 2021
|
React
React.js Styling Components & Elements
-
Inline CSS styling
- Inline 방식으로 CSS 스타일링을 할 수 있다
- 객체 생성 후 css문법을 적는데 주의할 점은 css가 아니라는것.
- 예시: background-color => backgroundColor (Camle표기법)
- 예시: backgroundColor: ‘white’, 값은 문자열로 적어야한다
- html 태그에 style={style}로 주입한다
- 문제점은 css상에서 가능한 hover 등 pseudo effect를 넣을 수 없다는것
- 하지만 inline 방식의 style은 객체를 이용하기에 조건에 맞게 객체의 요소를 편집함으로서 동적인 effect 효과를 낼 수 있다
- re-render시에 편집된 style을 다시 태그에 주입하는 것을 이용한 것이라 state나 props가 바뀌어 re-render가 일어나야한다는 전제조건이 필요
const style = {
backgroundColor: 'green'
}
<button style={style}></button> //버튼이 있다고 하자
if(!isStop) {
style.backgroundColor = 'red';
}
// 이와 같이 조건에 맞게 객체의 요소를 직접 편집할 수 있다
-
Change the className
- 리액트에서 {}의 의미는 Javascript를 이용한다는 것이다★
- 즉, 뭐든 바닐라 js로 하기 나름인건데 className 역시 {}를 이용해 얼마든지 변경이 가능하다
- className은 css와도 연관이 되므로 className이 바뀔때마다 스타일링이 바뀌는 환상적인 경험을 할 수 있다
/**
다음과 같은 CSS가 있다고 하자
.red {
color: red;
}
.bold {
font-weight: bold;
}
*/
// 클래스이름을 저장할 빈 배열 생성
const classes = [];
// 조건에 맞춰서 배열을 변경
if (this.state.length <= 2) {
classses.push('red', 'bold');
}
// className=red bold가 되므로 css가 적용이 된다
<div className={classes.join(' ')}>
<p>어쩌구</p>
</div>
-
Radium
- Inline 방식의 스타일 관리를 해주는 멋진 패키지가 있다
- 이것을 이용하면 hover와 같은 pseudo selector와 media query도 inline으로 적용이 가능하다
- npm install –save radium 설치 고고
- radium을 사용하려면 import와 export 설정이 필요하다
- pseudo selector는 ‘ ‘로 감싸서 사용
import Radium from 'radium'; // import 필요
const app = () => {
const style = {
':hover': 'salmon' // 'pseudo selector'
}
}
export default Radium(app); // Radium 메소드로 export
- media query도 사용법은 위와 같다
- 주의할점은 최상위 컴포넌트의 전체를 Radium의 StyleRoot 컴포넌트로 감싸주어야한다
import Radium,{ StyleRoot } from 'radium'; // import 필요
const app = () => {
const style = {
'@media (min-width: 500px)':
width: '450px';
}
return (
<StyleRoot> // * StyleRoot로 감싸야함
<div>
...
</div>
</StyleRoot>
)
}
export default Radium(app); // Radium 메소드로 export
-
styled-components library
- https://styled-components.com/ 공식 홈페이지
- npm install –save styled-components 라이브러리 설치
- import styled from ‘styled-components’;
- styled.모든HTML태그 백틱 사이에 css를 적는다
- 스타일링한 태그를 컴포넌트처럼 쓸 수 있다. props 역시 전달이 가능하고 이벤트도 걸 수 있다
- 이 역시 자바스크립트이기에 아래처럼 사용이 가능
import styled from 'styled-components';
const StyledDiv = styled.div`
width: 60%
color: ${props => props.value ? 'red' : 'black'}
...
@media (min-width: 500px){
width: 450px;
}
`; // css를 백틱 사이에 적는다
// 이렇게 스타일링한 컴포넌트를 html 태그처럼 사용한다
<StyledDiv alt={this.state.value}>
<h1>hi</h1>
</StyledDiv>
-
Class Module
- react-scripts 2.0.0 이상 버전에서는 eject를 통한 설정파일 편집을 하지 않고도 class module을 이용한 styling이 가능하다
- 저마다 고유한 format의 className을 정의하기 때문에 충돌을 방지할 수 있다
- css 파일을 만들때 xxx.module.css 로 지정하여 .name으로 styling 한다
- 사용처에서 import 하고 className={변수명.name}으로 사용
/* Button.module.css 파일명 */
.error {
background-color: red;
}
import styles from './Button.module.css';
<button className={styles.error}>btn</button>
참고 자료
reactjs.org - 공식홈페이지
Udemy - React The Complete Guide
Radium
Adding a CSS Modules Stylesheet
28 Jan 2021
|
로그포스
2021-01-28 TIL
- 오늘 한 것
- 리액트 공부 - React-The Complete Guide 오늘 공부한 내용은 생활코딩이나 구름에듀 강의에서 들었던 것들이랑 겹치는 부분이 많았다. 기초적인 hook의 사용법이라던지, 간단한 CRUD 구현 등등. 아마 내일부터 하는 내용들이 본격 처음배우는 개념들이라 정신 바짝차리고 해야겠다.
- 학원 비대면 수업(15:30~22:00)
- 내일 할 것
- 리액트 공부 - React The complete Guide
- 학원 비대면 수업(15:30~22:00)
학원 개인 프로젝트를 일찍 끝내서 시간을 벌은만큼 다른 사람들보다 알차게 의미있는 시간을 보내야지
오늘의 한 줄 총평 : 리액트 가즈아
