React를 위한 ES6 문법

1. let / const

<script>
        // let은 block 안에서만 인식
        let a = 100
        a = 250
        console.log(a)
        {
            let a = 50
            console.log(a)
            {
                let a = 200
                console.log(a)
                {
                    let a = 300
                    console.log(a)
                }
                console.log(a)
            }
            console.log(a)
        }
        console.log(a)

        // const는 재선언, 재할당 불가
        const b = 100
        // b = 250
        console.log(b)
        {
            const b = 50
            console.log(b)
            {
                const b = 200
                console.log(b)
                {
                    const a = 300
                    console.log(b)
                }
                console.log(b)
            }
            console.log(b)
        }
        console.log(b)
    </script>

 

2. 템플릿 리터럴(Template literal) 새로운 문자열 표기법

<script>
        // backtick(`)
        // 변수 처리는 ${변수}
        let a = 20
        const b = 30
        const str1 = a +'와'+ b+'합은'+(a+b)
        console.log("str1 = " + str1)
        
        const str2 = `${a}와 ${b}의 합은 ${a+b}`
        console.log(`str2 = ${str2}`)


        const name = '김다미'
        const age = 20
        const addr = '서울'
        const str3 = `이름은 ${name}이고 나이는 ${age}이고 집은 ${addr} 입니다.`
        console.log(`str3 = ${str3}`)
    </script>

3. 삼항연산자와 &&연산자, ||연산자

<script>
        // 삼항연산자와 &&연산자, ||연산자
        // react JSX 문법안에서 연산자 3개만 조건문처럼 사용가능 - if X 
        
        // 함수영역에서는 모든 연산자 제어문 사용가능
        const test1 = true
        const test2 = false
        const test3 = undefined

        // 같다 === 다르다 !==
        // 삼항연산자 (조건) ? 참 : 거짓
        const result1 = test1 === true ? '참' : '거짓'
        console.log(result1)

        // 조건 && 조건에 대한 결과가 참일 때 결과
        const result2 = test1 && '참에 대한 결과'
        console.log(result2)

        // 조건 || 거짓의 결과값
        const result3 = test2 || '거짓의 결과'
        console.log(result3)

        const result4 = test3 || '값이 존재하지 않음'
        console.log(result4)

        // 다중 if문처럼 사용하고 싶다
        /*
        조건1 && '결과1'
        조건2 && '결과2'
        조건3 && '결과3'
        조건4 && '결과4'
        */
    </script>

 

4. 화살표함수

<script>
        /*
        function make1() {
            console.log('test1')
        }
        make1()

        function make2(num) {
            console.log(`${num} 값`)
        }
        make2(200)

        function make3(num1, num2) {
            console.log(`${num1+num2}`)
        }
        make3(20,30)
        */

        const make1 = () => {
            console.log('test1')
        }
        make1()

        const make2 = (num) => {
            console.log(`${num} 값`)
        }
        make2(200)

        const make3 = (num1, num2) => {
            console.log(`${num1+num2}`)
        }
        make3(20,30)

    </script>

5. 배열

<script>
        const arr = [10,20,30]
        arr.push(40)
        arr.push(50)
        arr.push(60)

        // 배열의 값이 변경
        console.log(arr)

        const arr1 = [10,20,30]
        // 사본 concat
        const arr2= arr1.concat()
        console.log(arr1)
        console.log(arr2)

        const arr3 = arr1.concat(40,50,60)
        console.log(arr3)

        const data = [
            {id:1, name:'김다미', age:20},
            {id:2, name:'최우식', age:23},
            {id:3, name:'김진주', age:22},
        ]
        console.log(data[0].id, data[0].name, data[0].age)
        console.log('/////////////////////')
        const data1 = data.concat()
        const data2 = data.concat({id:4, name:'유재석', age:30})
        console.log(data1)
        console.log(data2)
    </script>

 

6. map

<script>
        const arr = [10,20,30]
        
        const data = [
            {id:1, name:'김다미', age:20},
            {id:2, name:'최우식', age:23},
            {id:3, name:'김진주', age:22},
        ]
        
        // map 반복문 - jsx 영역
        /*
        arr.map( (현재값, 인덱스) => {
            return 반환값
        })
        */

        arr.map( (item, index) => {
            // return 필수, react에서 에러가 안떠서 찾기 힘듦
            return (console.log(index, item))
        })
        console.log('//////////////////')

        // 결과가 하나일 때는 {} return 생략가능
        arr.map( (item, idx) => console.log(idx, item))
        console.log('//////////////////')

        data.map( (item, idx) => {
            return ( console.log(idx, item.id, item.name, item.age) )
        })
        console.log('//////////////////')

        data.map( (item, index) => console.log(item.id, item.name, item.age))

    </script>
    <pre>
        https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
        
        arr.map(callback(currentValue[, index[, array]])[, thisArg])
        
        매개변수
        callback
        새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
        currentValue
        처리할 현재 요소.
        index Optional
        처리할 현재 요소의 인덱스.
        array Optional
        map()을 호출한 배열.
        thisArg Optional
        callback을 실행할 때 this로 사용되는 값.
        반환 값
        배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.
    </pre>

7.filter 

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

<script>
        const arr = [10,20,30,40,50,60]

        // 객체.filter( 현재값 => 조건)
        const result1 = arr.filter( item => item > 30)
        console.log(result1)

        const result2 = arr.filter( item => item === 40)
        console.log(result2)

        // 40을 삭제한 나머지만 출력
        const result3 = arr.filter( item => item !== 40)
        console.log(result3)

        const data = [
            {id:1, name:'김다미', age:20},
            {id:2, name:'최우식', age:23},
            {id:3, name:'김진주', age:22},
        ]

        const data1 = data.filter( item => item.name === '최우식')
        console.log(data1)

        const data2 = data.filter( item => item.id !== 2)
        console.log(data2)
        
        // arr.filter( 현재값 => 조건 ) => 결과 배열출력
        // arr.find( 현재값 => 조건 ) => 결과 하나의 값
        // arr.findIndex( 현재값 => 조건 ) => 결과 인덱스번호

    </script>
    <pre>
        https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

        arr.filter(callback(element[, index[, array]])[, thisArg])
        
        매개변수

        callback
        각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.
        element
        처리할 현재 요소.
        index Optional
        처리할 현재 요소의 인덱스.
        array Optional
        filter를 호출한 배열.
        thisArg Optional
        callback을 실행할 때 this로 사용하는 값.
        반환 값
        테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.
    </pre>

8. find

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.

<script>
        const arr = [10,20,30,40,50,60]

        //객체.find( 현재값 => 조건 ) : 값 결과
        const arr1 = arr.find( item => item > 40 )
        console.log(arr1)

        const arr2 = arr.find( item => item === 20 )
        console.log(arr2)

        const data = [
            {id:1, name:'김다미', age:20},
            {id:2, name:'최우식', age:23},
            {id:3, name:'김진주', age:22},
        ]

        const data1 = data.find( item => item.id === 1)
        console.log(data1)

        const data2 = data.findIndex( item => item.name === '김진주')
        console.log(data2)

    </script>
    <pre>
        https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

        arr.find(callback[, thisArg])
        
        callback
        배열의 각 값에 대해 실행할 함수. 아래의 세 인자를 받습니다.
        element
        콜백함수에서 처리할 현재 요소.
        indexOptional
        콜백함수에서 처리할 현재 요소의 인덱스.
        arrayOptional
        find 함수를 호출한 배열.
        thisArg
        선택 항목. 콜백이 호출될 때 this로 사용할 객체.
        반환 값
        주어진 판별 함수를 만족하는 첫 번째 요소의 값. 그 외에는 undefined.
    </pre>

 

9. indexOf

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

<script>
        const arr = ['고구마', '감자', '김치', '고기', '고단백', '참치']
        const txt1 = '고'

        // '고'가 들어간 단어 찾기
        const result1 = arr.filter( item => item.indexOf(txt1) !== -1)
        console.log(result1)

        const data = [
            {text: '운동을 하다'},
            {text: '수영을 하다'},
            {text: '저녁을 먹다'},
            {text: '친구를 만나다'},
            {text: '잠을 자다'},
            {text: '밥을 하다'},
        ]
        const txt2 = '하다'

        // '하다'가 들어간 문장 찾기
        const result2 = data.filter( item => item.text.indexOf(txt2) !== -1)
        console.log(result2)
</script>

 

10. 비구조할당 (=구조분해)

<script>
        const dog = {
            name: '치와와',
            age: 3
        }
        console.log( dog.name, dog.age )
        console.log( dog["name"], dog['age'] )

        // 비구조할당, 구조분해
        // const {키, 키, 키} = 객체
        const { name, age } = dog
        console.log(name, age)

        const data = {
            name2:'김철수', age2:20, kor:100, eng:80, mat:70
        }
        console.log(data.name2, data['age2'], data.kor, data["mat"])
        
        const {name2, age2, kor, eng, mat} = data
        console.log(name2, age2, kor, eng, mat)
</script>

 

11. spread... 전개 연산자

<script>
        const arr = ['강아지', '고양이', '토끼', '소']
        const arr1 = arr.concat()
        const arr2 = [...arr]
        const arr3 = arr.concat('뱀','햄스터')
        const arr4 = [...arr,'우산','딸기']
        const arr5 = ['과자',...arr,'사탕']
        
        console.log(arr1)
        console.log(arr2)
        console.log(arr3)
        console.log(arr4)
        console.log(arr5)
        console.log('---------------')

        const dog = {
            name:'강아지', age:2
        }

        // 객체일때는 수정, 갱신
        const dog1 = { ...dog, name:'치와와', age:10 }
        console.log(dog1)
        console.log('---------------')

        const data = [
            {id:1, name:'김석진', age:20},
            {id:2, name:'민윤기', age:21},
            {id:3, name:'정호석', age:22},
            {id:4, name:'김태형', age:23},
            {id:5, name:'전정국', age:24}
        ]
        const data1 = [...data]
        console.log(data1)
        console.log('---------------')

        const data2 = [
            ...data,
            {id:6, name:'박지민', age:28}
        ]
        console.log(data2)
        console.log('---------------')

        // data 4번 김태형을 김남준으로, 30으로 변경
        const data3 = data.map( (item,idx) => {
            if( item.id === 4) {
                return {...item, name:'김남준', age:30}
            } else {
                return item
            }
        })
        console.log(data3)
        console.log('---------------')

        // data 1번 김석진을 김석진2로 변경
        const data4 = data.map( item => item.id === 1 ? {...item, name:'김석진2'} : item)
        console.log(data4)

</script>