Share
Sign In
React Coding Guide
코드들이 일정한 규칙을 갖고 있으면, 작업했던 프로젝트를 다시 리팩토링 했을 때 훨씬 이해하기 빠르고 개발의 효율이 높아진다.
바로가기
Directory Structure
아래의 페이지의 “폴더구조” 부분을 확인하면 선호하는 “폴더구조”를 알 수 있다.
기본적인 바탕은 React의 CRA에 기본을 두고 있으며, 개발하려는 페이지에 따라 구조를 약간씩 변경하며 사용하고 있다.
React initial setting
Variables
변수명은 캐멀 케이스로 작성한다.
변수명은 명사를 사용한다. (동사x)
상수는 대문자를 사용한다.
Function Scope를 사용하기 위함이 아니라면,
var 대신 const, let을 사용한다.
var 대신 const, let을 사용한다.
가능한한 useMemo를 사용하여 최적화 한다.
변수명의 표기법은 스네이크 케이스, 카멜 케이스, 파스칼 케이스 등 다양하게 존재한다. 자세한 내용은 아래의 블로그를 확인하자.
Function Scope를 사용해야하는 경우는 빈번하지 않았다. 하지만 간혹 필요할 때가 있다. 그때를 제외하면 웬만하면 const, let을 사용하자. 개념이 어려운 경우에는 아래의 링크를 확인.
var, const, let 차이점 (변수 선언, 할당, 호이스팅, 스코프)
Case Study
Objects
속성 단축 구문을 사용한다.
api등을 통해 객체를 받아오는 경우, 초기화를 꼭 한다.
Case Study
Function
함수명은 캐멀 케이스로 작성한다.
함수명은 동사로 시작한다. 가능한 단순한 동사를 사용한다. (get, handle, delete 등)
컴포넌트 내에 존재할 경우, useCallback으로 최적화 한다.
컴포넌트 밖에 존재할 경우, 로컬 helper에 모아둔다.
Case Study
한 줄 짜리 함수라도 가독성을 위해 변수에 담아 사용하는 것을 권장한다.(불가피한 경우 제외)
함수 이름으로 함수의 용도를 알 수 있도록 네이밍한다. 필요한 경우 선언부에 주석을 다는 것을 권장한다.
재사용 가능한 함수는 별도로 모듈화하여 사용한다. utils/functions 또는 /helper
Components
메인 로직이 들어있는 컴포넌트는 표현식이 아닌 선언식으로 작성한다.
자식 컴포넌트를 부모 컴포넌트 내에서 정의하지 않는다.
컴포넌트명은 대문자로 시작한다. (지키지 않을 시 에러 발생)
컴포넌트가 너무 길어지는 경우, 성격이 유사하거나 재사용 가능한 부분이 있을 경우 별도의 컴포넌트로 분리하는 것을 적극 권장한다.
조건부 렌더링 && 혹은 삼항연산자를 활용한다.
children이 없는 컴포넌트의 경우 self-closing tag로 작성한다.
map을 사용해 컴포넌트를 렌더링하는 경우, key prop을 항상 추가한다.
Case Study
모듈
외부 모듈과 내부 모듈을 구분하여 사용한다.
용도에 따라 구분하고, 시작하기 전 주석을 단다.
상위, 하위 폴더에 바로 존재하지 않는다면 절대경로를 사용한다.
Case Study
조건 확인하기
삼중 등호 연산자인 ===, !== 만 사용한다.
==이나 !=는 암묵적 캐스팅으로 타입에 관계없이 판단되어 조건문의 의도를 파악하기 어렵고 버그로 이어진다.
Case Study
CSS (Styled Components)
인라인보다는 되도록 styled-components를 활용해 스타일을 설정하는 것을 지향한다 .
styled-components는 해당 컴포넌트 파일 내에 정의하는 것을 권장한다.
Case Study
Images
컴포넌트 단위로 폴더로 묶는다.
이미지가 여러장일 경우 같은 폴더에 index.js 파일을 만든다.
Case Study
Etc
새로운 라이브러리를 설치한 경우 커밋 메세지에 함께 남겨둔다 (협업자가 pull 하고 설치할 수 있도록)
More (JC)
연관된 페이지
React initial setting
var, const, let 차이점 (변수 선언, 할당, 호이스팅, 스코프)
React 홈으로 돌아가기
React.js
메인으로 돌아가기
코드들이 일정한 규칙을 갖고 있으면, 작업했던 프로젝트를 다시 리팩토링 했을 때 훨씬 이해하기 빠르고 개발의 효율이 높아진다.
바로가기
Directory Structure
아래의 페이지의 “폴더구조” 부분을 확인하면 선호하는 “폴더구조”를 알 수 있다.
기본적인 바탕은 React의 CRA에 기본을 두고 있으며, 개발하려는 페이지에 따라 구조를 약간씩 변경하며 사용하고 있다.
React initial setting
Variables
변수명은 캐멀 케이스로 작성한다.
변수명은 명사를 사용한다. (동사x)
상수는 대문자를 사용한다.
Function Scope를 사용하기 위함이 아니라면,
var 대신 const, let을 사용한다.
var 대신 const, let을 사용한다.
가능한한 useMemo를 사용하여 최적화 한다.
변수명의 표기법은 스네이크 케이스, 카멜 케이스, 파스칼 케이스 등 다양하게 존재한다. 자세한 내용은 아래의 블로그를 확인하자.
Function Scope를 사용해야하는 경우는 빈번하지 않았다. 하지만 간혹 필요할 때가 있다. 그때를 제외하면 웬만하면 const, let을 사용하자. 개념이 어려운 경우에는 아래의 링크를 확인.
var, const, let 차이점 (변수 선언, 할당, 호이스팅, 스코프)
Case Study
Objects
속성 단축 구문을 사용한다.
api등을 통해 객체를 받아오는 경우, 초기화를 꼭 한다.
Case Study
Function
함수명은 캐멀 케이스로 작성한다.
함수명은 동사로 시작한다. 가능한 단순한 동사를 사용한다. (get, handle, delete 등)
컴포넌트 내에 존재할 경우, useCallback으로 최적화 한다.
컴포넌트 밖에 존재할 경우, 로컬 helper에 모아둔다.
Case Study
한 줄 짜리 함수라도 가독성을 위해 변수에 담아 사용하는 것을 권장한다.(불가피한 경우 제외)
함수 이름으로 함수의 용도를 알 수 있도록 네이밍한다. 필요한 경우 선언부에 주석을 다는 것을 권장한다.
재사용 가능한 함수는 별도로 모듈화하여 사용한다. utils/functions 또는 /helper
Components
메인 로직이 들어있는 컴포넌트는 표현식이 아닌 선언식으로 작성한다.
자식 컴포넌트를 부모 컴포넌트 내에서 정의하지 않는다.
컴포넌트명은 대문자로 시작한다. (지키지 않을 시 에러 발생)
컴포넌트가 너무 길어지는 경우, 성격이 유사하거나 재사용 가능한 부분이 있을 경우 별도의 컴포넌트로 분리하는 것을 적극 권장한다.
조건부 렌더링 && 혹은 삼항연산자를 활용한다.
children이 없는 컴포넌트의 경우 self-closing tag로 작성한다.
map을 사용해 컴포넌트를 렌더링하는 경우, key prop을 항상 추가한다.
Case Study
모듈
외부 모듈과 내부 모듈을 구분하여 사용한다.
용도에 따라 구분하고, 시작하기 전 주석을 단다.
상위, 하위 폴더에 바로 존재하지 않는다면 절대경로를 사용한다.
Case Study
조건 확인하기
삼중 등호 연산자인 ===, !== 만 사용한다.
==이나 !=는 암묵적 캐스팅으로 타입에 관계없이 판단되어 조건문의 의도를 파악하기 어렵고 버그로 이어진다.
Case Study
CSS (Styled Components)
인라인보다는 되도록 styled-components를 활용해 스타일을 설정하는 것을 지향한다 .
styled-components는 해당 컴포넌트 파일 내에 정의하는 것을 권장한다.
Case Study
Images
컴포넌트 단위로 폴더로 묶는다.
이미지가 여러장일 경우 같은 폴더에 index.js 파일을 만든다.
Case Study
Etc
새로운 라이브러리를 설치한 경우 커밋 메세지에 함께 남겨둔다 (협업자가 pull 하고 설치할 수 있도록)
More (JC)
연관된 페이지
React initial setting
var, const, let 차이점 (변수 선언, 할당, 호이스팅, 스코프)
React 홈으로 돌아가기
React.js
메인으로 돌아가기
코드들이 일정한 규칙을 갖고 있으면, 작업했던 프로젝트를 다시 리팩토링 했을 때 훨씬 이해하기 빠르고 개발의 효율이 높아진다.
바로가기
Directory Structure
아래의 페이지의 “폴더구조” 부분을 확인하면 선호하는 “폴더구조”를 알 수 있다.
기본적인 바탕은 React의 CRA에 기본을 두고 있으며, 개발하려는 페이지에 따라 구조를 약간씩 변경하며 사용하고 있다.
React initial setting
Variables
변수명은 캐멀 케이스로 작성한다.
변수명은 명사를 사용한다. (동사x)
상수는 대문자를 사용한다.
Function Scope를 사용하기 위함이 아니라면,
var 대신 const, let을 사용한다.
var 대신 const, let을 사용한다.
가능한한 useMemo를 사용하여 최적화 한다.
변수명의 표기법은 스네이크 케이스, 카멜 케이스, 파스칼 케이스 등 다양하게 존재한다. 자세한 내용은 아래의 블로그를 확인하자.
Function Scope를 사용해야하는 경우는 빈번하지 않았다. 하지만 간혹 필요할 때가 있다. 그때를 제외하면 웬만하면 const, let을 사용하자. 개념이 어려운 경우에는 아래의 링크를 확인.
var, const, let 차이점 (변수 선언, 할당, 호이스팅, 스코프)
Case Study
Objects
속성 단축 구문을 사용한다.
api등을 통해 객체를 받아오는 경우, 초기화를 꼭 한다.
Case Study
Function
함수명은 캐멀 케이스로 작성한다.
함수명은 동사로 시작한다. 가능한 단순한 동사를 사용한다. (get, handle, delete 등)
컴포넌트 내에 존재할 경우, useCallback으로 최적화 한다.
컴포넌트 밖에 존재할 경우, 로컬 helper에 모아둔다.
Case Study
한 줄 짜리 함수라도 가독성을 위해 변수에 담아 사용하는 것을 권장한다.(불가피한 경우 제외)
함수 이름으로 함수의 용도를 알 수 있도록 네이밍한다. 필요한 경우 선언부에 주석을 다는 것을 권장한다.
재사용 가능한 함수는 별도로 모듈화하여 사용한다. utils/functions 또는 /helper
Components
메인 로직이 들어있는 컴포넌트는 표현식이 아닌 선언식으로 작성한다.
자식 컴포넌트를 부모 컴포넌트 내에서 정의하지 않는다.
컴포넌트명은 대문자로 시작한다. (지키지 않을 시 에러 발생)
컴포넌트가 너무 길어지는 경우, 성격이 유사하거나 재사용 가능한 부분이 있을 경우 별도의 컴포넌트로 분리하는 것을 적극 권장한다.
조건부 렌더링 && 혹은 삼항연산자를 활용한다.
children이 없는 컴포넌트의 경우 self-closing tag로 작성한다.
map을 사용해 컴포넌트를 렌더링하는 경우, key prop을 항상 추가한다.
Case Study
모듈
외부 모듈과 내부 모듈을 구분하여 사용한다.
용도에 따라 구분하고, 시작하기 전 주석을 단다.
상위, 하위 폴더에 바로 존재하지 않는다면 절대경로를 사용한다.
Case Study
조건 확인하기
삼중 등호 연산자인 ===, !== 만 사용한다.
==이나 !=는 암묵적 캐스팅으로 타입에 관계없이 판단되어 조건문의 의도를 파악하기 어렵고 버그로 이어진다.
Case Study
CSS (Styled Components)
인라인보다는 되도록 styled-components를 활용해 스타일을 설정하는 것을 지향한다 .
styled-components는 해당 컴포넌트 파일 내에 정의하는 것을 권장한다.
Case Study
Images
컴포넌트 단위로 폴더로 묶는다.
이미지가 여러장일 경우 같은 폴더에 index.js 파일을 만든다.
Case Study
Etc
새로운 라이브러리를 설치한 경우 커밋 메세지에 함께 남겨둔다 (협업자가 pull 하고 설치할 수 있도록)
More (JC)