styled-components 상속하기
const NavItem = styled(Link)`
`
<NavItem to={“/”}>Home</NavItem>
react-router-dom에 있는 기능인 Link를 상속시켜 link tag로 만들 수 있다.
const StyledNavItem = styled(NavItem)`
`
<StyledNavItem></StyledNavItem>
또한 기존 컴포넌트에 별도로 덧입히고 싶은 스타일이 있다면 styled()안에 컴포넌트명을 적어 기존 스타일을 상속할 수 있다.
styled-components 분리하기
/Layout/Layout.Styled.js
import styled from "styled-components";
export const ContentContainer = styled.div`
max-width: 1230px;
padding: 0 15px;
margin: 0 auto;
`
<ContentContainer></ContentContainer>
layout grid 처럼 자주 쓰는 레이아웃 컴포넌트를 생성하고 컴포넌트들을 모아 한 파일로 정리한다. 쓰고자 하는 곳에 import하여 어디든지 같은 스타일로 재사용 할 수 있다.
redux 안에 dispatch와 action을 미리 binding 해 줄 수 있는 함수가 있다
= bindActionCreators
파일마다 action을 전송할 때에 dispatch를 계속 쓰려면 코드가 길어질 수 밖에 없다.
bindActionCreators 함수는 전송해 줄 action과 dispatch를 미리 binding해서 선언한 후 가져와 dispatch 선언 없이 간단하게 action을 전송해줄 수 있다.
따로 분리해놓기 위해 actionCreators.js라는 하나의 파일을 만든다.
import {bindActionCreators} from "redux";
//store에서 dispatch를 가져온다.
import store from "./store";
const {dispatch} = store;
//app에 대한 action 생성자를 가져온다.
import {Action as AppAction} from "./app/redux";
//action생성자와 dispatch를 binding한다.
export const appActions = bindActionCreators(AppAction.Creators, dispatch);
기존에는 파일마다 일일히 dispatch를 불러와서 전송 했는데 미리 binding하여 호출하면 dispatch 구문을 불러오는 작업을 생략하여 간편하게 쓸 수 있다.
react hook인 useDispatch를 사용하려면 react가 import된 환경에서 쓸 수 있기 때문에 react없이도 store에서 dispatch를 꺼내올 수 있다.
<Close onClick={() => appActions.updateState({popup:{}})}></Close>
|| (논리합) && (논리곱) 연산자는 왼쪽부터 평가를 진행한다.
연산 중 평가결과가 나오면 오른쪽까지 가지 않고 평가를 반환하는 것을 단축평가라고 한다.
|| (논리합)의 단축평가
true || false;
true || true;
- || (논리합) 의 경우 둘 중 하나만 true이면 true로 평가되므로 왼쪽 연산자가 true이면 오른쪽은 보지도 않고 바로 왼쪽을 반환시킨다.
“apple” || false;
“apple” || true;
false || true;
false || false;
false || “banana”;
“apple” || “banana”
&& (논리곱)의 단축평가
false && true => false
false && false => false
false && “banana” => false
- 논리곱의 경우 둘다 true여야만 true가 반환되므로 왼쪽이 false일때엔 바로 false로 평가된다.
- 왼쪽이 true일때 오른쪽 값을 그대로 반환한다
null && false
true && true => true
true && false => false
“apple” && true
“apple” && false
true && “banana”
“apple” && “banana”
단축평가 사용법
- null / undefined 체크
- 함수 매개변수 기본값 설정
- 조건부 변수값 할당
1. null / undefined 체크
단축평가를 사용하면 null과 undefined의 관련된 문제를 예방할 수 있으며, 안정성 있는 코딩이 가능하다.
const a = null;
const name = a.name;
a.name은 값이 없기 때문에 type error가 발생한다.
const a = null;
const name = a && a.name;
console.log(name); //null
하지만 단축평가를 사용하면 왼쪽이 null일 경우 null이 반환되므로 type error는 나지 않는다.
let a; //초기화 없이 선언하면 undefined가 발생한다.
console.log(a.name); //타입에러
console.log(a && a.name); //undefined
undefined의 프로퍼티를 참조할때도 동일하게 해결할 수 있다.
2.함수 매개변수 기본값 설정
function getName(name){ const yourName = name; return yourName; } getName(); // undefined
- getName() 호출시 인자를 전달하지 않았지만 함수 내부에서 인자 값을 리턴하고 있기 때문에 undefined가 할당된다.
function getName(name){ const yourName = name || “홍길동”; return yourName; };
- || (논리합) 연산자를 이용한다면 매개변수의 기본값을 설정할 수 있다.
getName('정우성') //"정우성"
getName() //“홍길동”
|| (논리합) 연산자는 왼쪽값이 false일 경우 오른쪽 값을 무조건 반환하기 때문이다.
3.조건부 변수값 할당
if(true) name = “홍길동”; ⬇️ name = true && “홍길동”;
if문으로 변수에 값을 할당하는 코드를 단축평가로 대체할 수 있다.
{
app?.popup?.title &&
<Popup/>
}
= app && app.popup && app.popup.title && 과 같은 뜻으로 사용된다.
?. 옵셔널 체이닝은 앞의 평가대상이 undefined거나 null이면 평가를 멈추고 undefined를 반환한다.
사용시 프로퍼티가 없는 중첩 객체를 에러없이 안전하게 접근할 수 있다.
❗️ 옵셔널 체이닝을 남용하지 마세요.
?.는 존재하지 않아도 괜찮은 대상에만 사용해야 합니다.
사용자 주소를 다루는 예시에서 논리상 user는 반드시 있어야 하는데 address는 필수값이 아닙니다. 그러니 user?address.street 보다 user.address?.street를 사용하는 것이 바람직합니다.
실수로 인해 user에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야 합니다. 그렇지 않으면 에러를 조기에 발견하지 못하고 디버깅이 어려워집니다.
또한 옵셔널 체이닝 앞의 변수는 무조건 선언되어 있어야 한다.
user?.address; //user값이 없을때 error
[카레유] 자바스크립트 논리연산자 (&&, ||) 단축평가
https://curryyou.tistory.com/193
모던 자바스크립트 튜토리얼 옵셔널 체이닝
https://ko.javascript.info/optional-chaining
오늘의 til은 잘 모르고 넘어갔었던 개념들을 조금 더 톺아볼 수 있어서 정리 포스팅에서 시원한 스프라이트맛이 난다 🌊 🌊
그리고 bindActionCreators는 내가 원했던 기능!!
묶어서 깔끔하게 사용할 수 있다니 너무 좋았다.
조금 더 공부했으면 좋았을텐데 ㅠㅠ 하루가 금방금방 넘어가는 것 같다.
시간 대비 효율적으로 학습 할 수 있는 좋은 방안을 생각해 봐야겠다.