[React] Visual Studio Code 설치, es6(ecmascript) 자바스크립트 기초 문법

 

리액트를 사용할 툴인 비주얼 스튜디오 코드(Visual Studio Code)를 설치하고

ES6(ecmascript) 문법에 대해서 살펴보겠다!

 

 

React

리액트란 UI를 구현하는 자바스크립트 라이브러리다.

페이스북에서 제공해주는 프론트엔드 라이브러리로 사용하는 큰 기업들이 많다.

자바스크립트 친화적인 es6기반이며 성능 최적화와 유지보수가 쉽다.

공식 라이브러리가 없고 자유도가 높다.

 

 

Visual Studio Code 설치

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

리액트는 비쥬얼 스튜디오 툴을 사용하며, 위의 사이트에서 알집을 다운로드할 수 있다.

그다음 C드라이브 혹은 D드라이브 등의 드라이브 파일 내에

React라는 폴더를 만들어 그 안에 알집 내용을 옮겨준다.

자신이 지정할 폴더가 있으면 사용자 정의로 만들어줘도 상관없다.

 

리액트로 만든 파일을 담기 위한 'work'폴더도 만들어준다.

추후에 파일을 새로 만들 때 해당 경로로 지정해주면 된다.

 

모듈 설치를 위해서 React파일의 cmd창에

npm install --global yarn

입력해준다. yarn을 사용할 것이다.

 

마켓플레이스에선 사용자 지정으로 원하는 것들을 추가 설치해주면 된다.

 

---

• let / const

let과 const의 차이점은 변수의 불변성 차이다.

let은 불변하지 않아 변수에 재할당이 가능하지만

const는 불변성이 있어 변수를 재선언하거나 재할당할 수 없다.

 

 

• Backtick / Template Literal

` : Backtick

${} : Template Literal

 

<script>
    const name = '홍길동'
    const age = 20
    const addr = '서울'
    const gender = '남자'

    const str3 = `이름은 ${name}이고 나이는 ${age}이며 집주소는 ${addr} 성별은 ${gender}입니다`
    console.log(str3)

</script>

 

문자와 함께 혼용해서 사용할 수 있는 문자열 표기법이다.

템플릿 리터럴은 변수에 감싸주며 백틱을 함께 사용해준다.

 

 

• 삼항연산자

<script>
        const done1 = true
        const done2 = false

        const result1 = done1===true ?  '참' : '거짓' 
        console.log(result1)

        const result2 = done1 && '나는 참의 결과' 
        console.log(result2)

        const result3 = done2 || '나는 거짓의 결과'
        console.log(result3)
</script>

 

삼항연산자 : 조건 ? true일때 : false일때

 

자바스크립트에서는 === 3개를 입력해준다. 3개는 자료형까지 비교할 수 있다.

&&는 결과가 true일 때, ||는 결과가 false일 때 뒤의 내용이 출력된다.

 

 

• 화살표 함수

<script>
        const make1 = () => {
            console.log("함수1")
        }
        make1()

        const make3 = (num1,num2) => {
            console.log(num1 + num2)
        }
        make3(100,200)
    </script>

 

화살표 함수를 사용하는 법이다.

매개변수의 유무에 따라서 괄호 속의 값을 다르게 넣어준다.

make1 함수는 매개변수가 없으므로 빈 괄호로 입력하며, 결과는 문자 함수1이 출력된다.

 

make3 함수는 매개변수가 2개이며 

밑에서 함수 호출 시 각각의 값을 넣어줌으로써 더한 값이 출력된다.

 

 

• push / concat / slice

    <script>
        const arr1 = [10,20,30,40,50]
        arr1.push(60)
        arr1.push(70)
        console.log(arr1)

        //--------------------------
        const arr2 = [10,20,30,40,50]
        const arr3 = arr2.concat();
        const arr4 = arr2.concat(60,70,80); 

        console.log(arr2)
        console.log(arr3)
        console.log(arr4)

        //--------------------------
        const arr5 = arr2.slice(1,3)
        console.log(arr5)
    </script>

 

- push

push : 배열의 맨 뒤로 값을 삽입한다.

따라서 arr1에는 50 뒤에 60, 70이 순서대로 출력된다.

 

- concat

concat() : 데이터를 그대로 복사한다

concat(값) : 데이터를 그대로 복사한 후 맨 뒤에 순서대로 넣은 값을 삽입한다.

 

- slice

slice(startIndex,endIndex) : startIndex부터 endIndex전까지의 값만 반환한다.

endIndex의 값은 불포함이므로 그 앞의 값까지만 포함된다는 것을 주의하자.

 

push는 배열의 값이 변경되지만, concat과 slice는 기존의 배열이 유지된다!

 

 

• map

<script>
        const arr1 = [10,20,30,40,50]
        
        arr1.map((item,index)=>{ 
            return(console.log(index,item))
        })
        

    </script>

 

map : 자바스크립트의 반복문

배열.map((요소,인덱스) => {return 요소});

 

return은 생략해도 되며 map안의 괄호 속 위치는 고정한다.

 

 

• filter / find / findIndex

<script>
        const arr = [10,30,40,50,80,100,30]

        const result1 = arr.filter(item=>item>50)
        console.log(result1)

        console.log('-----------------')

        const data = [
            {id:1,name:'a',age:27},
            {id:2,name:'b',age:25},
            {id:3,name:'c',age:28},
            {id:4,name:'d',age:30},
            {id:5,name:'e',age:28},     
        ]

        const result6 = data.find(item=>item.id===2)
        console.log(result6)
        
        console.log('-----------------')
        
        const result7 = arr.findIndex(item=>item>30)
        console.log(result7)
</script>

 

- filter

filter(변수=>조건)

조건에 true인 값이 반환된다.

따라서 result1은 80,100이 반환된다.

 

- find

조건에 해당되는 첫 번째 요소의 값 1개를 반환한다.

따라서 id가 2인 값의 결과가 나오게 된다.

 

- findIndex

find와 마찬가지이며 대신 인덱스가 반환된다.

따라서 arr 배열의 30보다 큰 첫번째 요소는 40이므로 인덱스 번호 2가 출력된다.

 

 

• IndexOf / 비구조 할당

<script>
        const arr = ['고구마','감자','고기','고단백','수박']

        const text1 = '고'
        const result1 = arr.filter(item=>item.indexOf(text1)!==-1)
        console.log(result1)
        
        console.log("------")

		const arr2 = {
            a:10,b:20,c:30
        }

        const {a,b,c} = arr2
        console.log(a,b,c)
</script>

 

- IndexOf

indexOf(값) : 값이 포함되는 문자열을 반환한다.

-1을 값이 없는 것이므로 !==-1은 값이 있다는 것이다.

따라서 포함된 값들을 반환한다.

 

- 비구조 할당

밑의 arr2에서 먼저 객체 생성을 해주고

개별 요소들을 다시 할당해준다.

그럼 배열에 연결된 값으로 입력하지 않고 변수 하나하나를 따로 입력해줄 수 있다.

 

 

 

4월 13일 수업 🌝