[JAVASCRIPT 공부일지] 2주차 - 4 (자바스크립트 문법 - 모듈, 반복문, { } 표현법)

'리액트 네이티브' 앱 개발에 필요한 자바스크립트의 문법에 대해서 배워보고자 합니다.

---

<앱& 자바스크립트 - 모듈, 반복문, { } 표현법>

<키워드 export>
- export를 function 앞에다가 달면 참조할 수 있습니다. 
- export 키워드는 밖에서도 쓸 수 있게 만들어주는 키워드입니다.

export default function App { } // App함수를 외부에서 사용할 수 있도록 내보낼 수 있습니다.

<Module System (모듈 시스템)>
: 화면을 그리는 함수말고도 데이터를 다룰 때도 유용하게 사용됩니다. 
: 딕셔너리 + 리스트 복합구조(JSON 데이터 형식)로 구성됩니다.
: 모듈시스템의 사용 예로, 폴더 안에 이 data.json을 넣고, 반복문을 통해서 APP.js 에서 뿌려줄 수 있습니다.
>> App.js 에서 

import data from './data.json'

cf) 같은 폴더 내에 있는 것에 접근할때 ./ 을 사용함
cf) 만약 assets 폴더 안에 있는 것을 접근하려면 ../ 을 사용함

<반복문> - map 함수

ex) 
tip.map((content,i) => {
return ~~~~

>> 여기서 첫번째 인자(content)는 리스트 요소 하나하나가 담겨있고,
>> 두번째 인자 (i) 는 리스트의 순서를 나타내는 것
>> map 반복문을 돌릴때마다 JSON문법을 반환하는 것이므로 return 안에 쓰여짐
>> JSX 문법 안에서 변수를 쓰려면 중괄호 { } 로 감싸야한다는 것을 유의

ex) {content.title}
>> content로 접근해서 data.json에 있는 title 변수에 접근하겠다를 의미합니다.

---

<리액트 네이티브에서 여러 JSX문법을 바깥에 보이려고 할때>

1. 하나의 유니크한 키 값을 가지고 있어야합니다.
2.  키 값을 지정하려면 key={i} 를 넣어줍니다.
>> i는 인덱스 값이 모두 0, 1, 2 로 다르기때문에 중복이 있을 수 없으므로 유니크한 키 값입니다. 
     따라서 i를 지정해 준 것입니다.

---

<JSX 문법 안에서 자바스크립트 사용>

간단히는 { } 중괄호를 쓰면 됩니다.
ex) 

let todayWeather = 10 + 17;
let todayCondition = "흐림"

오늘의 날씨: {todayWeather + '°C ' + todayCondition}

오늘의 날씨: { todayWeather + '°C ' + todayCondition }

---

<홀수만 or 짝수만 스타일 주고 싶을때>

ex) 삼항연산자 사용

let result = 10 > 2 ? "참" : "거짓"

>> ? 의 왼쪽 식이 참이면 "참"이 담기게되고 거짓이면 "거짓"이 담기게 됩니다.

ex) 실제코드에서는 

tip.map((content,i)=>{
            return i % 2 == 0 ? (</view style={styles.style1} key={i}> : ...{styles.style2}...

>> 홀수이면 뒤의 스타일(styles.style2)을 적용하게 됨
>> 짝수이면 앞의 스타일(styles.style1)을 반환하게됨

 

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.