1. 코딩 스타일 가이드

1. Componentization

가장 중요함: 코딩 후에 refactor도 필요하지만, 우선 처음부터 component화 시키는 것이 중요.

가독성과 코드 재사용을 위해서 반드시 component화 필요.

Composable commerce의 필수 요건.

 

예시 : layout.tsx

const Layout = ({ children }) => (
  <div className="layout">
    <header>
    	Header content
        ...
        ...
    </header>
    <main>{children}</main>
    <footer>
    	Footer content
        ...
        ...
    </footer>
  </div>
);

export default Layout;

 

이 파일 하나에 수 천 line 코딩하지 말고, Header와 Footer를 src/components/ 에 코딩 후 import

 

import Header from '@/components/header';
import Footer from '@/components/footer';

const Layout = ({ children }) => (
  <div className="layout">
    <Header />
    <main>{children}</main>
    <Footer />
  </div>
);

export default Layout;

 

2. Nullish Coalescing

물음표 두 개 ??를 사용하는 문법.

ES2020에 도입된 javascript 문법.

REST API를 response를 json으로 받아 체크하는데 유용함.

 

예시: Javascript에서 모든 falsy값이 아닌 undefined와 null 값 두 가지인가를 확인.

false || true;    // => true
false ?? true;    // => false

 

false라는 값은 boolean 이고 undefined 혹은 null이 일 때만 뒤에 나오는 default 값 (여기서는 true)를 취함.

즉, 응답 json에서 의도적인 빈 문자열 값을 받을 때 이를 변형하지 않을 수 있다.

사용 예시: 

const name = foo ?? "default value";

 

 

 

foo라는 변수가 undefined나 null 일 경우에만 'default value'가 할당되고 빈 문자열 ""이나 boolean 값일 때는 그대로 놔둠.

 

3. 고차함수

.map, .filter, .reduce의 문법을 익힌다.

return (
  <ul>
    {items.map(item, index) => <li key={index}> {item} </li>}
  </ul>
)

 

4. key

Next.js 고유가 아닌 모든 React 기반으로 코딩을 할 때 .map()을 쓰면 항상 key값을 주어야한다.

처음 React를 접할 때 가장 많이 하는 실수.

예시는 위 참조

 

5. try-catch

예시 :

async function fetchData() {
  // An async function for fetching data from an API
  try {
    const response = await fetch('<https://api.example.com/data>');
    if (!response.ok) {
      throw new Error(`API call failed with status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    // Error handling or logging logic
    throw error;
  }
}

 

6. ternary operator

예시:

return (
  <>
    {isLogin ? <div>Logged in</div> : <div>Not Logged in </div>}	
  </>
)

 

7. Destructuring

예시: without destructuring

function displayPerson(person) {
  const name = person.name;
  console.log(name);
}

 

예시: with destructuring

function displayPerson({ name, age, job }) {
  console.log(name);
}

 

 

8. optional chaining

값이 없을 때 나는 오류를 방지하기 위해 required field가 아니면 물음표 입력

productList?.info?.color