02-2. Next.js를 위한 기본 javascript syntax

다음은 Next.js에 국한되지 않고,

예를들어 백엔드 프로그래밍을 하다가 처음 React를 접했을 때 기본적으로 알아야 할 것들을 나열해보았다.

쓰다보면 React에서 가장 자주 쓰이는 syntax는 정해져있다.

 

1. Componentization

이건 javascript에 관한 것이라기보다 refactoring 관련인데

한 파일 안에 2천800줄되는 코드도 봤는데 도저히 수정이 불가능하다.

처음 짤 때부터 컴포넌화하는 습관이 중요하다.

예시: refactor 안 된 코드 예

profile-page.jsx

...
const ProfilePage = ({user}) => {
	return (
    <div>
      <h1>User Profile</h1>
      <div>
        <img src={user.avatarUrl} alt="User Avatar" />
        <h2>{user.name}</h2>
        <p>Email: {user.email}</p>
        <p>Bio: {user.bio}</p>
        {/* Additional user info and actions */}
      </div>
    </div>
  );
};

export default ProfilePage;

재사용 component로 refactor된 코드

user-profile.jsx 따로 작성

const UserProfile = ({ user }) => {
  return (
    <div>
      <img src={user.avatarUrl} alt="User Avatar" />
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Bio: {user.bio}</p>
      {/* Additional user info and actions */}
    </div>
  );
};

export default UserProfile;

profile-page.jsx

import UserProfile from '../components/UserProfile';

const ProfilePage = ({user}) => {
  return (
    <div>
      <h1>User Profile</h1>
      <UserProfile user={user} />
    </div>
  );
};

export default ProfilePage;

 

2. destructuring

object 값이 있을 때

const person = {
  name: 'John Doe',
  age: 30,
  job: 'Developer'
};

Without destructuring

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

with destructuring

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

 

3. optional chaining

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

productList?.info?.color

 

4. nullish coalescing

이것은 ES2020에 도입된 javascript 문법이다.

javascript에서 falsy값은 여러 종류가 있다.

boolean값을 false로 주는 빈 문자열, 0, false 등 모두 falsy 값인데

물음표 두 개 ??는 undefined와 null 값일 때만 적용된다.

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

response로 받은 json 값에 의도적으로 빈 문자열이 들어있는 것을

|| 로 놓으면 default 값을 취하는 것을 방지한다.

const Test1 = ({ foo, bar }: MyData) => {
  const name = foo ?? "default value";
  console.log("foo, name", foo, name);

위 코드에서 foo값이 null 혹은 undefined인 경우에만 “default value”가 할당된다.

빈 문자열이나 0이면 그 값을 따른다.

 

5. 고차함수

.jsx 혹은 .tsx의 component안에 return() 안에서 for loop은 먹히지 않는다.

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

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

 

6. key

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

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

.map() 안에 여러 개의 component가 rendering되는데, React가 reconciliation algorithm을 사용해서 이 각각의 DOM이 어떤 DOM인지를 알기 위해 고유의 key값을 알아야한다. (알아서 해주면 좋은데 이거 안 해주면 warning이 엄청나게 뜬다.)

예시는 위 참조

 

7. try-catch

javascript도 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;
  }
}

 

8. ternary operator

return() 함수 안에 for loop이 바로 안 먹히듯이, if else도 직접 사용은 안 된다.

그래서 대신 tenary operator가 가장 많이 쓰인다.

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