#2 Today I Learned - 21.01.05

@ye-r1·2021년 1월 5일
0

til

목록 보기
2/11
post-thumbnail

Today I Learned 📝

  • styled-components : 상속과 분리
  • react-redux : actionCreators를 미리 binding 하기
  • javascript : 논리연산자 단축평가
  • javascript : optional chaining = ?.


styled-components : 상속과 분리

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하여 어디든지 같은 스타일로 재사용 할 수 있다.


react-redux : actionCreators를 미리 binding 하기

redux 안에 dispatch와 action을 미리 binding 해 줄 수 있는 함수가 있다
= bindActionCreators

파일마다 action을 전송할 때에 dispatch를 계속 쓰려면 코드가 길어질 수 밖에 없다.
bindActionCreators 함수는 전송해 줄 action과 dispatch를 미리 binding해서 선언한 후 가져와 dispatch 선언 없이 간단하게 action을 전송해줄 수 있다.

따로 분리해놓기 위해 actionCreators.js라는 하나의 파일을 만든다.

import {bindActionCreators} from "redux";
  1. bindActionCreators를 import 시킨다
//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);
  1. store 안에 미리 만든 action 생성자를 가져온 후 bindActionCreators 안에 action 생성자와 dispatch를 인자값으로 대입한다. (실행되면 액션이 반환되는데 그걸 미리 디스패치와 묶어주는 역할을 한다.)

기존에는 파일마다 일일히 dispatch를 불러와서 전송 했는데 미리 binding하여 호출하면 dispatch 구문을 불러오는 작업을 생략하여 간편하게 쓸 수 있다.

react hook인 useDispatch를 사용하려면 react가 import된 환경에서 쓸 수 있기 때문에 react없이도 store에서 dispatch를 꺼내올 수 있다.

<Close onClick={() => appActions.updateState({popup:{}})}></Close>
  1. dispatch를 사용할 공간에 dispatch 대신 미리 binding한 appAction를 사용한다.

javascript : 논리연산자 단축평가

|| (논리합) && (논리곱) 연산자는 왼쪽부터 평가를 진행한다.
연산 중 평가결과가 나오면 오른쪽까지 가지 않고 평가를 반환하는 것을 단축평가라고 한다.


|| (논리합)의 단축평가

true || false;
true || true;

  • || (논리합) 의 경우 둘 중 하나만 true이면 true로 평가되므로 왼쪽 연산자가 true이면 오른쪽은 보지도 않고 바로 왼쪽을 반환시킨다.

“apple” || false;
“apple” || true;

  • 만약 피연산자가 문자열일 경우에 빈 문자열이 아니면 true 로 평가된다.

false || true;
false || false;
false || “banana”;

  • || (논리합) 연산자는 왼쪽이 false일 경우에는 오른쪽 피연산자 값이 false라도 그대로 반환 시킨다.

“apple” || “banana”

  • 둘 다 문자열일 경우에도 왼쪽을 반환한다.

&& (논리곱)의 단축평가

false && true => false
false && false => false
false && “banana” => false

  • 논리곱의 경우 둘다 true여야만 true가 반환되므로 왼쪽이 false일때엔 바로 false로 평가된다.
  • 왼쪽이 true일때 오른쪽 값을 그대로 반환한다

null && false

  • 만약 왼쪽에 null이 들어온다면 왼쪽 null이 반환된다.

true && true => true
true && false => false

  • 왼쪽이 true일때는 오른쪽도 true여야 true를 반환한다.
    ( = 왼쪽이 true일때 오른쪽 값을 그대로 반환한다 )

“apple” && true
“apple” && false

  • 만약 왼쪽이 문자열일 때에는 문자열은 true로 평가되기 때문에 오른쪽 값을 그대로 반환한다.

true && “banana”

  • 왼쪽이 true면서 오른쪽은 문자열일때에는 오른쪽 값을 그대로 반환하므로 문자열이 반환된다.

“apple” && “banana”

  • 만약 양쪽 다 문자열일때에는 오른쪽 문자열 값을 그대로 반환한다.
    이는 왼쪽 문자열이 true로 평가되어서 오른쪽 값을 그대로 반환하기 때문이다.

단축평가 사용법

  1. null / undefined 체크
  2. 함수 매개변수 기본값 설정
  3. 조건부 변수값 할당

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문으로 변수에 값을 할당하는 코드를 단축평가로 대체할 수 있다.


javascript : optional chaining = ?.

{
	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


reference 🔗

[카레유] 자바스크립트 논리연산자 (&&, ||) 단축평가
https://curryyou.tistory.com/193

모던 자바스크립트 튜토리얼 옵셔널 체이닝
https://ko.javascript.info/optional-chaining


review 📃

오늘의 til은 잘 모르고 넘어갔었던 개념들을 조금 더 톺아볼 수 있어서 정리 포스팅에서 시원한 스프라이트맛이 난다 🌊 🌊
그리고 bindActionCreators는 내가 원했던 기능!!
묶어서 깔끔하게 사용할 수 있다니 너무 좋았다.
조금 더 공부했으면 좋았을텐데 ㅠㅠ 하루가 금방금방 넘어가는 것 같다.
시간 대비 효율적으로 학습 할 수 있는 좋은 방안을 생각해 봐야겠다.

0개의 댓글