리액트 강의 4

 

자바스크릡트의 모든 변수는 함수 단위로 scope가 정해진다.

 

[closure]

-어떤 함수가 암묵적으로 참고하고있는 다른 함수이다.

 

		// 클로저의 발생 예제 -----------------------------------
		const arr = [];

        function doA(){

            let i = 0; //지역변수이기때문에 사라져야 하나 arr에 들어있는 함수에서 참조하고있어 사라지지 못하고있다.
            
            for(; i<5; i++){
                arr.push(function(){console.log(i)}); //i를 참조하고있다.
            }
        }

        doA();
        
        for(let i = 0 ; i < arr.length; i++){
            arr[i]();
        }
        //result : 5,5,5,5,5 
        //doA의 실행으로 인해 doA의 i가 5가 된 상태로 함수를 실행하기 떄문에 나오는 결과이다.

 

        //모듈 패턴 - - 클로저를 이용하는 패턴
        
        function PiggySave(){ //함수인데 클래스처럼 이름을 대문자로 시작함(모듈)
            
            let money = 0;

            function addMoney(amount){
                money += amount
                console.log(money);
            }

            return {addMoney: addMoney}
        }

        const save = PiggySave();

        console.dir(save);
        save.addMoney(100); //result : money = 100
        save.addMoney(200); //result : money = 300 (closure의 발생으로 money를 참조했다..)

 

소문자로 만드는 모듈파일들은 logic을 담는 파일들이고

대문자로 만드는 파일들은 component파일들이다.

 

export 는 {} (brace) 가 걸리고 

export default 는 브레이스가 걸리지 않는다.

 

기능의 하나하나하나를 사용하고싶으면 export를 사용하고 모듈의 전체기능을 가져다 쓸때는 export default를 쓴다.

 

React코드를 짜는 순서

1. 그림부터 그린다.

2. 어디부터 어디까지 컴포넌트로 쪼갤것인지 고민을 한다.

3. 컴포넌트 선정

4. 컴포넌트간의 데이터 교환방법에 대해서 정한다(상태 / 메세지)

 

모든 컴포넌트를 다 가지고있는 애들을 컨테이너 컴포넌트라고 한다( 상태를 가지고있고 하위컴포넌트를 가지고 있다)