24.08.11 개인과제 질문 답변

• JSX 문법이란 무엇일까요?
  • JSX문법이란 Javascript Syntax eXtension으로, javascript를 확장한 문법이다.
  • 브라우저에서 실행하기 전에 바벨(babel)을 이용하여 javascript 형태의 코드로 변환한다.
  • 아래 5가지 규칙을 따라야 한다.

1. 반드시 부모요소 한개로 감싸야 한다.

// 잘못된 케이스
function App() {
	return (
		<div>안녕!</div>
		<div>하세요!</div>
	)
}

// 올바른 케이스
function App() {
	return (
    	<>
            <div>안녕!</div>
            <div>하세요!</div>
        </>
	)
}

 

2. 자바스크립트 표현식

function App() {
	let hello = '안녕!'
	return (
    	<>
            <div>{hello}</div>
            <div>하세요!</div>
        </>
	)
}

자바스크립트 표현식을 작성하기 위해서는 {} 중괄호 안에 작성하면 된다.

 

3. if문(for문) 대신 삼항연산자 사용

function App() {
	let bool = true
	return (
    	<>
            <div>{bool ? '안녕!' : '????'}</div>
            <div>하세요!</div>
        </>
	)
}

if문이나 for문을 사용하려면 js 부분에서 함수로 선언하고, JSX형식으로({}안에서 호출하여) 사용하면 된다.

 

4. React DOM은 HTML attribute 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

function App() {
	const divStyle = {
		color: 'red',
        fontSize: '5px'
	}
	return (
    	<>
            <div style={divStyle}>안녕하세요!</div>
        </>
	)
}

혹은 기존 css파일을 사용하는 방법도 가능하다. 단, class대신 className을 지정해야한다.

import './App.css'
function App() {
	return (
    	<>
            <div className='divStyle'>안녕하세요!</div>
        </>
	)
}

//App.css
.divStyle {
    color: red;
    font-size: 5px;
}

 

5. 주석 사용시 {/*주석내용*/}의 형태로 사용한다.

function App() {
	let hello = '안녕!'
	return (
    	<>
            {*/<div>{hello}</div>/*}
            <div>하세요!</div>
        </>
	)
}

 

• 사용자가 입력하는 값, 또는 이미 입력된 값, 메달 정보와 같은 애플리케이션의 상태를 관리하기(추가, 변경, 삭제) 위해 리액트의 어떤 기능을 사용하셨나요?

useState hook을 사용했다. useState로 국가명, 각 메달들을 저장하는 state들을 만들고, 모든 데이터를 저장하기 위한 total이라는 state을 만들었다.

그리고 해당 state들을 변경하기위해 useState에서 제공해주는 setState를 사용하였다.

 

• 애플리케이션의 상태 값들을 컴포넌트 간 어떤 방식으로 공유하셨나요?

props로 부모에서 자식으로 내려주며 상태값을 공유하였다.

<>
    <div className="wrapper">
        <Title />
        <MedalInputForm
            country={country}
            setCountry={setCountry}
            medals={medals}
            addHandler={addHandler}
            updateHandler={updateHandler}
        />
        {total.length ? (
            <MedalListBox onClick={deleteHandler} total={total} />
        ) : (
            <p>아직 추가된 국가가 없습니다. 국가를 추가해주세요!</p>
        )}
    </div>
    <Modal elRef={modalRef} alertText={alertText} />
</>

 

• 기능 구현을 위해 불변성 유지가 필요한 부분이 있었다면 하나만 설명해 주세요.

const deleteHandler = (e) => {
    const { id } = e.target;
    const newArray = [...total].filter((el) => el.id != id);
    setTotal(newArray);
};

해당 코드가 가장 짧아 삭제기능을 예시로 든다.

기존 저장되어있는 total State를 전개연산자 ... 을 사용하여 깊은복사한다.

만약 삭제시 const ~ let ~으로 선언된 일반변수가 변한다면 리액트는 변화를 감지하여 리렌더링하지 못하므로, 불변성을 유지해줄 필요가 있었다.

 

• 반복되는 컴포넌트를 파악하고 재사용할 수 있는 컴포넌트로 분리해 보셨나요? 그렇다면 어떠한 이점이 있었나요?

반복되는 컴포넌트를 파악하고 왼쪽과 같이 분리하였다. 먼저 재사용성을 기준으로 컴포넌트를 분리했다. 불필요하게 반복해서 작성한 코드가 짧아진 장점이 있었고, 어떤 기능을 추가하려고 하면 한 컴포넌트에서 작업을 하면 모든 해당 컴포넌트가 변경되니 유지보수에 유리했다. 그리고나서 코드를 직관적으로 만들기위해 필요한 부분을 컴포넌트화 시켰다. 컴포넌트의 이름을 잘 지으면 확실히 코드를 보기 쉬워질 것 같은데, 컴포넌트 작명이 굉장히 중요하다는 것을 깨달았다.