[React] 스프레드 연산자, 반복문은 map(), 그밖의 기초 리액트 팁

참고 서적 : Learning React 한빛미디어

 

 

 

리액트는 자바스크립트 언어를 베이스로 한 라이브러리이기때문에 기본적으로 자바스크립트 함수를 많이 사용하는데 그래서 그런지 리액트를 처음시작할때 기본적인 자바스크립트 함수를 먼저 배우고 시작하는 것이 좋다.

 

시중에있는 리액트 교재도 그런식으로 커리큘럼이 짜여져 있고 유튜브나 학원 강의도 보통 그렇게 시작하는 것 같다.

 

Do it 자바스크립트 4-2. 배열 객체와 자주쓰는 메서드. 배열함수

많이 쓰이는 자바스크립트 기초 함수들 중에서도 웬만한 것들은 지난번에 작성한 자바스크립트 배열함수 글과 겹치는 부분이 많은데 아무래도 JSX 영역에서 for나 while같은 반복문을 사용할 수가 없어서 map함수를 많이 사용하고 특정 조건에 따라 다른 결과를 줄 수 있는 삼항연산자도 많이 쓰이는 것 같다.

(물론 지금은 배우는 단계 예제들이라 그럴수도....... 리액트 수업 3일차 삐약-)

 

 

스프레드(전개) 연산자 Spread Operator ...

세개의 점(. . .)으로 이루어진 연산자로 간단하게 얘기하면 기존 배열객체의 값을 그대로 복사해와서 사용할 수 있는 연산자라고 할 수 있다.

 

const m_doctors = ["익준", "정원", "석형", "준완"]
const f_doctors = ["송화", "겨울", "민하"]

const doctors = [...m_doctors, ...f_doctors]
console.log(doctors)
/*
["익준", "정원", "석형", "준완", "송화", "겨울", "민하"]
*/

오늘도 예시는 재미나게 보고있는 슬의생으로ㅋㅋㅋㅋ 김대명배우 배역이름 석현인줄 알았는데 석형이어따.........

 

 

반응형

 

리액트에서 반복문처럼 쓰이는 map()

컴포넌트에 대한 설명은 일단 생략하고 App.js에 바로 해보자

 

const App = () => {
    const title = '슬기로운 의사생활2'
    const doctors = ['익준', '송화', '준완', '정원', '석형']

    return (
        <div>
            <h2>
                드라마 : {title}
            </h2>
            <hr/>
            {doctors.map((item, index)=><p key={index}> {index} / {item} </p>)}         
        </div>
    );
};

export default App;

 

이렇게 작성하면 아래와 같은 결과가 나온다

 

* JSX영역에서 변수를 사용할때는 중괄호 안에 변수명을 넣어 사용한다.  {변수명}

* 숫자나 논리값(boolean)역시 중괄호 안에 넣어 쓴다. {true}, {false}, {10}

* map을 반복문처럼 사용할때는 반드시 key값이 있어야 하는데 id와 같은 primary key값이 따로 없다면 index를 대신 사용할 수 있다. 

 

그리고 신기했던게(?) JSX영역 안에서 html 태그를 사용할때는 반드시 닫는태그가 있어야 오류가 나지 않는다.

실제 html에서는 닫는 태그가 없는 <hr>, <br>같은 것들도 이 안에서는 <hr/> <br/>으로 사용해야한다.

 

화살표 함수 처음에는 엄청 낯설었는데 그거 며칠했다고 익숙해졌다. 역시 인간은 적응의 동물인가....