악덕고용주의 개발 일기

  [ 비슷한 코드를 반복적으로 "렌더링"하는 방법 ]

  데이터 배열 처리시

  map() 메서드는 파라미터로 전달된 함수를 통하여 배열 내의 각

  요소를 처리해서 그 결과로 새로운 배열을 생성한다.

  arr.map(callback,[thisArg])

    callback : 새로운 배열의 요소를 생성하는 함수로서, 다음 세가지 인수를 가진다.

      - currentValue : 현재 처리되고 있는 요소

      - index : 현재 처리되고 있는 요소의 index 값

      - array : 메소드가 불려진 배열

    thisArg(선택항목) : callback 함수 내부에서 사용할 this 값을 설정

    ex) var numbers = [1,2,3,4,5]; // 처음 값 1,2,3,4,5

    var processed = numbers.map(function(num){

      return num*num;

    });

    //processed가 갖고 있는 값 : 1,4,9,16,25

    이걸 ES6 문법으로 작성해 보면(arrow function)

    let numbers = [1,2,3,4,5];

    let result = numbers.map((num) => {

      return num * num;

    });

    ES6의 arrow 문법 예제)

      - 파라미터 한개인 경우 : let one = a => console.log(a)

      이건 )

        var one = function one(a){

          return console.log(a);

        }

        와 같음

       - 파라미터가 두개인 경우 : 

            let two = (a,b)=>console.log(a,b);

       - 함수의 내부가 여러줄인 경우

          let three = (c,d)=>{

            console.log(c);

            console.log(d);

          }

       - 파라미터가 없는 경우

          let four = ()=>{

            console.log("no params");

          }

html 쪽에서

<div id="root"></div>

- 필요한 것

1) Babel : ES6문법을 -> ES5문법으로 변환해주면서 JSX도 지원해줌(구 브라우저도 지원하기 위해 추가)

2) React :

<script src=" 

https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js" />

3) ReactDOM : 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"/>

리액트는 컴포넌트 기반!!!!

[    JavaScript 영역    ]

class Codelab extends React.Component{ // React컴포넌트

  render(){

    //  컴포넌트가 어떻게 생길지 정의해줌

    // JSX : javascript 상에서 html 태그를 그대로

    //      사용 가능

    //  ""로 감싸지 않는다.

    // BaBel에서 지원해줌

    let text = "Hi I am codelab";

    // let : ES6의 문법 var는 스코프가 함수영역

    // let은 블럭단위임, ES6에선 let을 관습적으로 사용

    // 어떤 뷰를 보여줄지 JSX 형태로 리턴해주면 됨

    // JSX에서 자바스크립트를 사용하려면 {}로 감싸주면된다.

    let style = {

      backgroundColor:'aqua'

    };

    return (

      // Element가 여러개일 때는 꼭 container:div와 같은 것 내부에 와야함

      <div style={style}>

        <h1>{text}</h1>

        <span>multiElement</span>

      </div>

    );

  }

}

class App extends React.Component{

  render(){

   return(

     <Codelab/>

   );

  }

}

ReactDOM.render(<App/>,document.getElementById("root"));

// 2번쨰 인자에 첫번째 컴포넌트를 그려줘라

// id가 root인 div에다가 App 컴포넌트를 랜더링해줘라.

// JSX의 특징

/*

  - 컴포넌트에서 여러 Element를 렌더링할 때

    꼭 container element 안에 포함시켜줘야함

    div와 같은...

    <h1>hi</h1>

    <h2>h2</h2> 

    이렇게 X

    <div>

      <h1>hi</h1>

      <h2>h2</h2>

    </div>

    이렇게 O

    JSX 안에서 자바스크립트를 표현할 때는 {}로 해주면 된다.

*/