Published on

ES6위주의 react 코드 관습 정리

Authors

리액트를 통하여 웹앱을 개발할 때, 다음 코딩 관습들을 참고해보자. 강제되는 사항은 아니지만, 해외 자바스크립트 개발자들의 코딩 관습들을 모아서 정리했으니, 도움이 되길 바란다.

VSCode를 사용하자

우선, 리액트 개발의 추천 IDE는 Visual Code를 많이들 추천한다. 자체적으로도 다양한 기능을 지원할 뿐 아니라, 다양한 extension들을 통하여 더 나은 개발 환경 구축이 가능하기 때문이다. 추천 extension은 다음과 같다.

  • ES Lint - By Microsoft
  • Prettier - By Prettier
  • Auto import - By steoates
  • Reactjs code snippets - By charalampos karypidis
  • JavaScript (ES6) code snippets - By charalampos karypidis

ES6 문법을 사용하자

모든 프로그래머는 언제나 항상 자신의 코드가 클린 코드(Clean Code)이길 바란다. 클린 코드를 향한 열망으로 탄생한 javascript ES6 syntax는 개인 개발 환경에서든 협업 개발 환경에서든 유용하게 사용할 수 있다. 아래의 ES6 문법을 참고해서 더욱 깔끔한 코드를 설계해 보자.

화살표 함수 (=>) 사용하기

// ES6 이전
function getAdd(a, b) {
  return a + b;
}

// ES6
const getAdd = (a, b) => a + b;

템플릿 리터럴 사용하기

// ES6 이전
var name = "마르헤드";
console.log("My name is " + name);

// ES6
const name = "마르헤드";
console.log(`My name is ${name}`);

const & let 사용하기

const와 let은 블록 범위를 가지고 있습니다. 즉, 유효한 범위가 명확히 제한된다는 변수 선언문이라는 거죠. 변수의 변동 가능성에 따라 const와 let을 사용하면 됩니다.

// ES6 이전
var fruits = ["apple", "banana"];

// ES6
let fruits = ["apple", "banana"];
fruits.push("mango");

const workingHours = 8;

객체 해체

var person = {
  name: "John",
  age: 40,
};

// ES6 이전
var name = person.name;
var age = person.age;

// ES6
const { name, age } = person;

객체 정의

var name = "John";
var age = 40;
var designations = "Full Stack Developer";
var workingHours = 8;

// ES6 이전
var person = {
  name: name,
  age: age,
  designation: designation,
  workingHours: workingHours,
};

// ES6
const person = { name, age, designation, workingHours };

여기까지는 자바 스크립트에 대해 다양한 코드적 규범에 대한 설명이였다. 위와 같이 ES6 문법에 대해 다양한 기능과 활용성을 볼 수 있다.

JSX를 사용할 때 반드시 key값 맵핑하기

배열에 값을 매핑할 때, 항상 unique한 값을 각각의 JSX 원소들에게 할당해 주어야 한다. 최대한 풀어서 설명한다고는 했지만, 부족하다면 공식 문서를 참고하면 더욱 자세한 설명을 읽을 수 있다.

const students = [{id: 1, name: 'Bilal'}, {id: 2, name: 'Haris'}];

// in return function of component
<ul>
  {students.map(({id, name}) => (
    <li key={id}>{name}</li>
  ))}
</ul>;

컴포넌트 이름은 파스칼 케이스(PascalCase)로 짓기

const helloText = () => <div>Hello</div>; // wrong

const HelloText = () => <div>Hello</div>; // correct

변수와 함수 이름은 카멜 케이스(camelCase)로 짓기

const working_hours = 10; // 비추천 사례

const workingHours = 10; // 추천 사례

const get_sum = (a, b) => a + b; // 비추천 사례

const getSum = (a, b) => a + b; // 추천 사례

ID와 클라스 이름은 케밥 케이스(kebab-case)로 짓기

<!--비추천 사례-->
<div className="hello_word" id="hello_world">Hello World</div>

<!--추천 사례 -->
<div className="hello-word" id="hello-world">Hello World</div>

객체와 배열의 null값과 undefined값 항상 확인하기

개체 및 배열의 경우 null 및 undefined를 무시하면 오류가 발생할 수 있다. 그러니 항상 코드에서 유효성겁사를 하자.

const person = {
  name: "Haris",
  city: "Lahore",
};
console.log("Age", person.age); // error
console.log("Age", person.age ? person.age : 20); // correct
console.log("Age", person.age ?? 20); //correct

const oddNumbers = undefined;
console.log(oddNumbers.length); // error
console.log(oddNumbers.length ? oddNumbers.length : "Array is undefined"); // correct
console.log(oddNumbers.length ?? "Array is undefined"); // correct

인라인 스타일링(Inline Styling)은 피하자

인라인 스타일리은 JSX코드를 지저분하게 보이게 한다. 별도의 .css.파일에서 클라스와 아이디를 통하여 스타일링 하도록 하자.

const text = <div style={{ fontWeight: "bold" }}>Happy Learing!</div>; // 비추천 사례

const text = <div className="learning-text">Happy Learing!</div>; // 추천 사례

.css 파일 양식:

.learning-text {
  font-weight: bold;
}

직접적인 DOM 조작은 피하기

직접적인 DOM 조작 보다는 React State를 활용하자.

// 비추천 사례
<div id="error-msg">Please enter a valid value</div>
document.getElementById("error-msg").visibility = visible;

//추천 사례
const [isValid, setIsValid] = useState(false);

<div hidden={isValid}>Please enter a valid value</div>;
Set isValid false or true where you have logic of validating a value

useEffect() 사용시 EventListner 항상 지우기

이전에 추가한 EventListner를 제거하기 위해 useEffect에 정리 함수 작성을 잊지 말자!

const printHello = () => console.log("HELLO");
useEffect(() => {
  document.addEventListener("click", printHello);
  return () => document.removeEventListener("click", printHello);
});

반복을 피하고 Generic 컴포넌츠를 활용하자

Generic 컴포넌트를 비슷한 그룹의 elements를 랜더링 하고 props로 넘겨주기에 더욱 추천한다.

const Input=(props)=>{
  const [inputValue, setInputValue]=useState('');
  return(
    <label>{props.thing}</label>
    <input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)} />
  )
}

또다른 예시로, Input 컴포넌트는 아래와 같이 표현할 수 있다.

<div>
  <Input thing="First Name" />
  <Input thing="Second Name" />
</div>

파일을 아무렇게나 넣지 말자

연관 파일끼리는 최대한 하나의 폴더에 담을 수 있도록 한다.

예를들어, 네비게이션 바를 만들고 싶다면, 네비게이션 바 폴더를 만들고 관려된 .js, .css파일들을 전부 넣도록 하자.

함수형 컴포넌트를 추천

상태를 관리할 필요 없는 정적 elements를 렌더링하고 싶을 경우, 함수형 컴포넌트가 더욱 간단하다. 특히, 객체형 컴포넌트보다 더욱 간단해서 많이들 사용한다.

React 훅에 관련된 컴포넌트일 경우, 함수형 컴포넌트를 통해서도 충분히 상태를 관리할 수 있다.

헬퍼 함수를 작성하는 습관을 들이자

가끔 React 앱 전반에서 한번 이상 utility를 호출해야 할 때가 있다. 그럴때 효과적으로 대응하기 위해, helper 함수를 별도의 파일로 구분하여 작성해 두면, 원할 때 언제든 편하게 불러 호출할 수 있다.

if/else문 대신 삼항연산자 추천

if문을 사용하게 되면 코드의 부피가 커지게 된다. 대신 삼항연산자를 최대한 활용할 경우 코드를 더욱 간단하고 깔금하게 한다.

// 비추천 사례
if (name === "Ali") {
  return 1;
} else if (name === "Bilal") {
  return 2;
} else {
  return 3;
}

// 추천 사례
name === "Ali" ? 1 : name === "Bilal" ? 2 : 3;

import 복잡성을 최소화 하기 위해 index.js 파일 만들기

import를 할 때의 코드를 단순화 시키기 위해 각 폴더에 index.js라는 파일을 만들면 다음과 같은 구문으로 action을 가져올 수 있다.

// 추천 사례
import { actionName } from "src/redux/actions";

action 경로는 위의 가져오기에 설명되어 있듯, 아래의 평서 import문과 같이 index를 불러오지 않아도 된다.

// 비추천 사례
import { actionName } from "src/redux/actions/index";

속성내부 값 읽어오기

한 속성 내부에 접근하여 여러 값들을 불러오려고 할 때, 속성 자체를 완전 분해하여 각 변수들을 반환하도록 하자.

// 비추천 사례
const Details = (props) => {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
      <p>{props.designation}</p>
    </div>
  );
};

// 추천 사례
const Details = ({ name, age, designation }) => {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
      <p>{designation}</p>
    </div>
  );
};

동일한 함수에서 수정된 상태 변수에 접근하려 하지 말자

함수 내부에서, 한번 상태 변수에 값을 할당한 뒤에는, 다시 상태변수에 접근하지 말자.

const Message = () => {
  const [message, setMessage] = useState("Hello World");
  const changeMessage = (messageText) => {
    setMessage("Happy Learning");
    console.log(message); // It will print Hello World on console
  };

  return <div>{message}</div>;
};

== 대신 === 사용하기

두 변수를 비교하려 할 때, 엄격하게 두 값에 대한 데이터 타입과 값을 비교하는 것이 좋다.

"2" == 2 ? true : false; // true
"2" === 2 ? true : false; // false

위 관습들을 참고해서 즐거운 개발 생활을 헤쳐나가길 바란다!

Discuss on Twitter • View on GitHub