Optional-Chaining

optional-chaing이란 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자이다.

optional-chaing은ES2020에 나온 최신 문법이다.

예전에는삼항 연산자를 사용하였다.

data는 동기적으로 받아와야하는 데이터이다. 하지만 데이터가 오기전에 이미return부분에서렌더링을 해주고 있기 때문에, 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 모두 적어주어야 했다.

data ? data.fetchProfile : undefined

이후에는&& 연산자를 사용했다.

data && data.fetchProfile

&&연산자는 데이터가 없을 경우, 자동으로 undefined를 반환해준다. 데이터가 없을 경우 따로div를 쓸 필요도 없다. 하지만 이 코드도 줄이고 싶어졌나보다.

&&연산자는 앞의 값이 참일 경우에만 뒤의 값을 보여주었는데, 반대로 앞의 값이 거짓일때 뒤의 값을 보여주는 경우도 있다. 이것을Nullish coalescing연산자라 한다.

data ?? data.fetchProfile

data || data.fetchProfile

optional-chaining은?연산자 앞 객체의 참조가undefined || null이라면,undefined를 리턴한다. 위에 있는 삼항연산자, &&연산자와 똑같은 기능을 한다. 하지만 더욱 간단해졌다.

비구조화할당(=구조분해)

비구조화할당 = 구조분해할당모두 같은 뜻이다.
구조분해할당도 나름 최신 문법이다.ES6(ES2015)버전에서 나온 기능이다.

구조분해할당은 간단히배열과 객체를 해체하여 안의 값을 사용하는 것이다.
예제를 통해 이해해보자.

배열구조분해

let data = ["one", "two", "three"];

[일, 이, 삼] = data;
console.log(일) // "one"
console.log(이) // "two"
console.log(삼) // "three"

아래와 같은 경우도 가능하다.

const [a, b] = [1, 2]
console.log(a) // 1
console.log(b) // 2

생각하면React에서 사용하는useState와 동일한 형태이다.

const [count, setCount] = useState(0)

우리는 위처럼 쓰고 있다.useState는 함수인 것을 알 수 있다. 그리고 결과는 배열로 나온다.

위에서 만든 useState는 아래와 같은 결과다.

const count = useState(0)[0]
const setCount = useState(0)[1]

이제는 useState의 작동방식에 대해 더 자세히 알게 되었다.

객체구조분해

객체도 구조분해할당으로 더욱 편리하게 사용할 수 있다.

예제

let profile = {name:"철수", age:8}

위 객체에서 값을 꺼내기 위해서는 profile.name / profile.age를 사용했다. 하지만 객체의 내용이 길어질수록, profile은 붙이기가 귀찮아진다.

그래서 아래와 같이 간편하게객체의 키로 바로 접근할 수 있게 된다.

const {name, age} = profile
console.log(name) // "철수"
console.log(age) // 8

혹은,name, age라는 이름 대신, 다른 것도 사용할 수 있다.

const {name:aaa, age:bbb} = profile
console.log(aaa) // "철수"
console.log(bbb) // 8

위의 예제는Query로 데이터를 받아 올 때사용하고 있다.

const {data} = useQuery(어쩌구저쩌구)

이러한 상황에서 구조분해할당을 하지 않으면,data.data.fetchBoard식으로 받아와야한다.data를 두번이나 쓰다니.. 구조분해할당을 써야겠군요!!

그런데, 한 곳에서useQuery를 2번이나 써야 하는 경우도 있다.그럴 경우, data로 2번 만들 수 없다.

const {data} = useQuery(아무말대잔치)
const {data:BestData} = useQuery(아무말대잔치)

위와같이 만들면 하나는 BestData.fetch아무말대잔치 로 받아올 수 있다.

실무용 폴더구조(container/presenter)

프로젝트를 만들때 폴더 구조는 매우 중요하다.
실무에서 사용하는 폴더 구조는 여러가지 방법이 존재한다.
이러한 방법들을패턴이라고 한다.

React에서 사용하는 유명한 패턴으로
1.container / presentational패턴

2.atomic패턴이 있습니다.

container / presetational 패턴

container / presentational 패턴이란, 소스코드를 자바스크립트(기능)와 HTML(UI)로 나누는 방법을 의미한다.
여기서, container는 자바스크립트(기능) 부분을 의미하고, presentational은 HTML(UI) 부분을 의미한다.

위 파일을 2개로 나누는 방법은 이와 같다.

atomic 패턴

atomic패턴이란, 소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법을 의미한다.

이렇게 하는 이유는컴포넌트의 중복을 최소화하기 위함이다.

총 5개의 폴더 구조로 이루어지며, 각각의 의미는 화학의 원리를 이용하여 만든다.

atoms, molecules, organisms, templates, pages 5개의 폴더로 나누어서 컴포넌트를 관리한다.

atomic 패턴은 디자이너분들에게도 널리 알려진 패턴이다. 따라서, atomoic 패턴을 사용하면 디자이너와 협업에 유리해질 수 있고, 프로젝트 시작부터 체계적인 UI적 설계가 가능해진다.

그러나, 프로젝트 시작부터 UI를 디자이너 분과 함께 전체적으로 설계해야하기 때문에, 개발준비까지 시간이 오래 걸릴 수 있는 단점이 있다. 그러므로, 시간, 비용, 상황에 따라 적용하는 것이 일반적이다.

props

props는부모 컴포넌트가 자식컴포넌트에게 넘겨준 데이터, 기능 등을 의미한다.

컴포넌트를 2개로 나누면서, 데이터와 기능의 연결고리가 끊겼다. 이때, 부모 컴포넌트와 자식 컴포넌트를 props로 연결할 수 있다.

props 구조분해할당으로 받아오기

단순(props)로 받아오게 되면 앞으로 props.~~ 와 같이 props를 붙여야합니다. 그래서 위에서 기술한 구조분해할당을 적용하면 편리해진다.

기존의 코드는

export const function BoardWrite(props){

<input onChange={props.handleInput}
<button onClick={props.handleChange}
}

구조분해할당은

export const function BoardWrite({handleInput, handleChange}){

<input onChange={handleInput}
<button onClick={handleChange}
}

이렇게 중괄호를 통해 구조분해할당을 하면 props 없이 간단하게 쓸 수 있다.

emotion에 props 던지기

emotion으로 만들어진 태그에도 props를 전달할 수 있다.
즉, 특정 태그를 클릭하는 등의 행위가 일어나는 경우, props를 활영하여 css를 변경할 수 있다.

간단한예제

import { useState } from 'react';
import { Test } from '../../src/test2';

export default function Test2() {
	const [isTrue, setIsTrue] = useState(false);

	const handleOnClick = () => {
		setIsTrue((prev) => !prev);
	};

	return (
		<>
			<Test onClick={handleOnClick}>클릭하면 색이 왔다 갔다</Test>
		</>
	);
}

import styled from '@emotion/styled';

export const Test = styled.div`
	color: red;
`;

위의 코드는 div를 클릭할 때마다 handleOnClick함수가 실행되어 isTrue의 값이 바뀐다.

return (
		<>
			<Test isTrue={isTrue} onClick={handleOnClick}>클릭하면 색이 왔다 갔다</Test>
		</>
	);

넘기는 방법은 간단하다. props로 넘길 때와 동일하다.

export const Test = styled.div`
	color: ${(props) => (props.isTrue ? 'red' : 'blue')};
`;

위와같이 적게 되면, isTrue값을 emotion에서 받을 수 있다. 삼항 연산자를 통해 true일 때는 red, flase일 때는 blue로 설정했다.

onClick 뿐만 아니라, onMouseOver / onMouseLeave 등 태그에는 on으로 시작하는 속성이 많기 때문에 여러방면으로 활용이 가능하다. 또한, true / false 뿐만 아니라, string, number 타입도 전달할 수 있다.

결론적으로, 특정 상황에서 CSS변경은 모두 emotion으로 props를 전달하는 것으로 만들 수 있다!!