리액트에서 코드 가독성을 높이는 방법

왜 이런 주제로 공부 하였는가?

리액트를 공부를 하는데 내 코드에 밑의 3가지 문제가 느껴졌다.

1. 최근에 리액트를 배우면서 코드가 더럽다고 느껴졌다.

2. 같은 내용이 반복되어 오히려 읽기 어려웠다.

3. 가독성이 떨어져 내가 왜 이런 코드를 만들었는지 헷갈렸다.

 

이것을 보니 앞으로 현장에서도 실습 할 기회가 있을텐데 다른 사람들과

협업을 하는 순간에도 이런 코드라면 협업하기 힘들 것이라 생각해 공부하였다.

 

그래서 코드 가독성을 높이는 방법은?

내가 생각한 중요한 키워드

나는 이 주제로 공부를 하기 위하여 검색을

변수명, JS, 들여쓰기, 중복된 코드, 정리 등의 키워드를 활용하여 검색을 하였다.

가독성을 높이는 방법

변수명

변수명을 작성하면 나는 기본적으로 a, b, c 같은 간단한 이름을 쓰던지

name1, name2, name3 같은 중복된 단어 뒤 숫자만 달아서 변수명을 정하는 습관이 있다.

 

오히려 이런 방법을 쓰다보니 내가 이 변수들을 활용을 하면 그때마다 어떤 변수 이름을

써야하는지 헷갈려서 시간이 오래 걸렸다.

이런 변수명들은 확실하게 그 역할을 나타내는 변수명이 좋다고 생각했다.

// 무엇을 나타내는 정보인지 알기 어려움
const Info1 = {내용};
const Info2 = {내용};	

// 변수명의 예시
// 나의 정보를 저장하는 변수
const MyInfo = {내용};	
// 학습 관련 정보를 저장하는 변수
const ClassInfo = {내용};

 

이 코드를 보면 확실히 Info1, Info2같은 내용은 그 변수들이 무엇을 저장하는지 알기 어렵지만

MyInfo와 ClassInfo는 무엇을 저장하는지 알기 쉽다.

 

변수와 함수의 정렬

변수와 함수들을 계속해서 추가하다 보면 변수와 함수의 위치가 엉망이 되어

가독성이 떨어지는 것을 경험했다. 예를 들면

// 내 정보를 저장하는 변수
const MyInfo = {내용};	

// 내 정보를 출력하는 함수
function PrintMY() {	
	console.log(MyInfo);
}
// 학습의 정보를 저장하는 변수
const MyClass = {내용};

// 학습의 정보를 출력하는 함수
function PrintClass() {	
	console.log(MyClass);
}

 

 이런 코드가 생길 수 있다. 지금은 코드의 길이가 적어 체감이 어렵지만

코드가 많이 생기면 가독성이 떨어져 다시 사용해야 하는 변수의 위치를 찾기 힘들다.

그래서 변수와 함수는 따로 분리 시키고 또한 빈 여백을 줘 변수와 함수를 따로 분리하면

가독성이 높아진다. 예를 들면

// 변수끼리 정렬
const MyInfo = {내용};
const MyClass = {내용};

// 함수끼리 정렬
function PrintMY() {
	console.log(MyInfo);
}

function PrintClass() {
	console.log(MyClass);
}

 

이런 방식으로 하면 변수를 찾기도 쉽고 함수도 보기 편해진다.

또한 여러개의 변수와 함수가 있으면 서로 비슷한 역할을 하는 내용끼리 붙이고

변수나 함수를 기준에 따라 묶어서 여백을 주면 더 깔끔한 코드가 될것이다.

 

들여쓰기

나는 코드를 들여쓰기를 맞추는 것을 신경을 쓴다. 하지만 친구들의 코드를 보면

가끔 들여쓰기가 없어 읽기 불편한 코드들이 있었다.

들여쓰기는 {}괄호 안에 내용을 더 편하게 보게 하는 특징이 있다고 생각한다. 예를 들면

// 들여쓰기 없음
for(let i=0;i<5;i++) {
alert(i);		
}

// 들여쓰기 있음
for(let i=0;i<5;i++) {
	alert(i);	
}

 

위 코드를 보면 알겠지만 들여쓰기가 없는 것이 하나밖에 없지만 읽기 불편하다는 느낌을

받을 수도 있다 그래서 위의 코드 중 2번째 for 문처럼 들여쓰기를 한다면

{}괄호에서 무슨 코드가 작동하는지 쉽게 보는 것이 가능 할 것이다.

 

주석

협업할 때 자신의 코드와 상대의 코드를 합치고 서로의 코드를 이해하는 것이 중요하다고 생각한다.

이것을 위해 나는 주석이 필요하다고 생각한다. 꼭 내가 쓰고 있는 리액트가 아니더라도

다양한 언어의 코드에서도 협업을 위해 주석을 다는 것이 중요하다고 생각된다. 예를 들면

for(let i=0;i<n;i++) {
	let temp = arr[i] // temp는 임시로 데이터를 저장하는 변수
    // 오늘 안에 temp를 이용해서 arr[i]와 arr[j] 위치를 바꾸는 알고리즘을 만들어주세요.
    // 다른 내용은 건드리지 마세요.
}

 

위 코드를 보면 협업을 하면 이런 방법으로 변수가 어떤 내용을 저장하는지 알려주거나

내가 해야 하는 내용을 주석으로 달아서 알려주기, 코드 수정 시 주의해야 하는 점 등

이런 내용을 주석으로 달아서 협업한다면 원활한 협업이 될 것이다.

 

삼향 연산자와 && 연산자

리액트에서 렌더링을 조건에 따라 하는 삼향 연산자와 && 연산자를 잘 활용하면

더 가독성 높은 코드를 만들 수 있다. 예를 들면

{	// 삼향연산자
	조건 ? <div>true</div> : <div>false</div>
}

{	// && 연산자
	조건 && <div>True</div>
}

이런 느낌으로 삼향 연산자는 하나의 조건을 통해 2가지의 형태를 렌더링 하고 싶다면 사용하는 것이 가독성이 좋다

여기에 &&를 쓴다면 true와 false의 결과 중 하나를 공백으로 채워야 하기 때문이다.

그래서 변수에 따라 1가지를 렌더링 하고 싶다면 && 연산자를 통해 조건이 참이면 렌더링을 하는 것이 좋다.

 

익명 함수

리액트를 배운다면 한번은 써보는 익명함수는 () => {} 형태를 하고 있고 ()에는 매개변수가 들어간다.

하지만 onClick에서 익명함수를 사용을 하면 <button onClick={() => 실행내용} /> 이런 느낌으로 사용을 한다.

하지만 매개변수가 없다면 <button onClick{실행내용} /> 이런 방법을 써서

코드의 가독성을 높일 수 있다. 예를 들면

const [input,setInput] = useState(0);

// 3번째 input을 통해 호출됨
const Key = (key) => {	
	console.log(key + "를 입력함");
}

return (
	<div>
    	// 매개변수를 안받아 익명함수 X
    	<button onClick={alert("성공")} />	
        // 매개변수를 받기 때문에 익명함수 O
        <input type='text' onChange={
        	(e) => setInput(e.target.value)
        } />
        // 기능을 위로 빼 가독성을 높이는 법
        <input type='text' onChange={
        	(e) => key(e.target.value)
        } />
    </div>
);

하지만 익명함수를 없이 사용하는 것은 렌더링 후 바로 실행되는 문제가 있어

적절하게 써야 한다.

 

중복되는 코드 해결법

리액트에서는 중복되는 코드를 간단하게 해결하는 방법이 있다. 바로 컴포넌트이다.

만약 코딩을 하는데 <div><button onClick={(e) => {긴 내용}} /></div> 라면 이것을 계속 복사를

하는 방법도 있지만 그런 방법을 사용한다면 같은 내용의 코드가 길게 이어질 것이다. 예를 들면

const [User, setUser] = useState([{
	value: '',
    name1: '',
},]);

return (
    <input type='text' value={value1} spellcheck="false" name={name1} onChange={
        (e) => setUser({
		...User,
		[name1]: e.target.value,
	})} />
    <input type='text' value={value1} spellcheck="false" name={name1} onChange={
        (e) => setUser({
		...User,
		[name1]: e.target.value,
	})} />
    ... // 같은 input 반복
);

위와 같이 코드가 복잡해지고 알기 힘들어 질것이다. 하지만 저 input을 컴포넌트로 만들면

간단하게 여러개의 input을 만들 수 있다. 수정된 코드는

const [User, setUser] = useState([{
	value: '',
    name1: '',
},]);

const TextInput = () => {
    const { value, name1 } = User;
    return (
        <input type='text' value={value1} spellcheck="false" name={name1} onChange={
            (e) => setUser({
            ...User,
            [name1]: e.target.value,
        })} />
    );
}

return (
    <TextInput />
    <TextInput />
    <TextInput />
    <TextInput />
    ... // 반복
);

같이 만들어진다. 보면 알기 쉽게 컴포넌트를 불러와 <TextInput />을 통해 코드가 보기 쉬워진 것을 알 수 있다.

이런 방법을 통해서 같은 코드들이 반복되는 것을 막고 코드의 가독성이 높아지는 효과가 있다.

또한 이것을 다른 파일에서 만들어 import를 시키면 더 간단한 코드가 만들어진다.

 

마치며...

그동안 코딩을 하면서 가독성에 대해 신경쓰지 않고 코딩을 하였기 때문에 이런 정리를 통해

앞으로 변수명이나 변수 정렬 등을 좋은 습관을 길러서 다른 사람과 협업을 잘하기 위하여 노력할 것이다.

 

이 내용이 다른 사람들에게는 이미 알고 있거나 필요 없는 내용일 가능성도 있지만 나와 같은 고민을 하는

사람들은 이 내용을 보면서 자신의 코드도 한번 보면서 어떤지 생각하는 것도 좋은 것 같다