리액트: codeAlive 웹페이지 개발 및 코드 리뷰회의 반영

1. 완성화면 보러가기

[완성화면]

[소스코드]

2. 개발 기간

9월 23일(금) ~ 9월 28일(수)

3. 코드 리뷰회의 반영 내역

(1) export 방식 변경

export default 문법을 사용하면, import 할 때 중괄호를 생략할 수 있어 좋다. 주의할 점은 반드시 ‘ ; ‘ export 할 컴포넌트 뒤에 붙여야 한다.

[변경 전]

// export
export { Contact }

// import
import { import Contact from '경로'; }

[변경 후]

// export
export default Contact;

// import
import Contact from '경로';

(2) .map()을 통해, value와 index 가져오기

배열 함수에서 map을 사용하는 경우, .map((value, index))를 통해 추출한 요소의 value와 index를 가져올 수 있다.

이러한 방법을 통해, 컴포넌트를 재사용할 때, 박스에 갯수에 맞는 인덱스값을 넣어주는 코드(BoxNumbers)를 생략할 수 있었고, 사용 오류도 줄일 수 있었다.

[변경 전]

const CourseBox = ({BoxNumbers=[], BoxTitles=[], BoxTexts=[]}) => {
    const listItems = BoxNumbers.map((BoxNumber) =>
        <div className={BoxNumber} key={BoxNumber.toString()}>
            <H1 H1Title={BoxTitles[BoxNumber]} H1PWidth='80%'/>
            <div>
                <H2 H2Title='24 Lessons x 100min'/>
                <br></br>
                <br></br>
                <p>{BoxTexts[BoxNumber]}</p>            
            </div>
        </div>
    );
    return (
        <div className='BoxWrap'>
            {listItems}
        </div>
    );
}

[변경 후]

const CourseBox = ({BoxTitles=[], BoxTexts=[]}) => {
    // 배열.map((value, index))로 추출한 요소의 value와 index를 가져올 수 있음
    const listItems = BoxTitles.map((value, index) =>
        <div className={index} key={index.toString()}>
            <H1 H1Title={BoxTitles[index]} H1PWidth='80%'/>
            <div>
                <H2 H2Title='24 Lessons x 100min'/>
                <br></br>
                <br></br>
                <p>{BoxTexts[index]}</p>            
            </div>
        </div>
    );
    return (
        <div className='BoxWrap'>
            {listItems}
         </div>
    );
}

(3) 컴포넌트에는 상수를 최대한 넣지 말자

컴포넌트에서 사용될 상수나 데이터일지라도 컴포넌트 안에 묶어 사용하지 말고, 컴퍼넌트 외부로 빼내어 사용하도록 하자.

왜냐하면, 컴포넌트가 리렌더링 될 때마다, 안쪽에 있는 데이터가 올라가기 때문에 옳지 못하다.

그리고 변수와 함수 사이에는 빈줄을 하나 추가하여 서로 구분될 수 있게 가독성을 올리자.

[변경 전]

const Review = ({sliderWidth}) => {
    const sliderHeight = parseInt(sliderWidth) * 0.28;
    const sliderElementsWidth = parseInt(sliderWidth)*0.38-100;
    const sliderSpeed = parseInt(sliderWidth) * 0.43;

    const [Step, SetStep] = useState(0);
    const [transitionTime, SetTransitionTime] = useState(0.2);
   
    const listItems = [
        {
            key : '#444(1)',
            text : `"codeAlive는 정말 재미있습니다. 저는 함수, 루프, 조건문을 배웠고 멋진 프로젝트를 만들었습니다. 또한 그로 인해 디지털 큐레이터라는 미래를 꿈꾸게 되었습니다."`,
            url : 'url(https://www.codealive.co.kr/images/main/img_profile.png)',
            user : '배정빈 | 아주중3'
        },
        
        ....

[변경 후]

    const sliderHeight = parseInt(sliderWidth) * 0.28;
    const sliderElementsWidth = parseInt(sliderWidth)*0.38-100;
    const sliderSpeed = parseInt(sliderWidth) * 0.43;

    const [Step, SetStep] = useState(0);
    const [transitionTime, SetTransitionTime] = useState(0.2);
   
    const listItems = [
        {
            key : '#444(1)',
            text : `"codeAlive는 정말 재미있습니다. 저는 함수, 루프, 조건문을 배웠고 멋진 프로젝트를 만들었습니다. 또한 그로 인해 디지털 큐레이터라는 미래를 꿈꾸게 되었습니다."`,
            url : 'url(https://www.codealive.co.kr/images/main/img_profile.png)',
            user : '배정빈 | 아주중3'
        },

const Review = ({sliderWidth}) => {        
        ....

(4) HTML 태그 안에 속성에는 되도록 이면, 쌍타옴표를 사용하자.

React에 적응이 되다보니, 이번 프로젝트에서 HTML 태그의 속성에 자꾸 홑따옴표를 사용했었다.

가독성 면에서 HTML 태그의 속성에는 되도록 쌍따옴표를 사용하여 구분되도록 하자.