하루 하루 즐겁게

Keystone 이 Routing 하지 않고 Next가 하게 하려면

1.

kestone.js 를

이렇게 바꾼다.

keystone.set('routes', require('./routes')(app));

이부분이 keytone의 라우팅을 next가 하게 해주는 부분이다.

next가 라우팅을 하게 하려면

프로젝트의 root 에서 pages 폴더를 만들어 그 안에 보여줄 화면들을 만든다. 

https://youtu.be/x3rhCJWGFc4 를 보며 공부하고, 이해하기 위해 정리 중입니다.

map() 메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 배열을 생성합니다.

사용 문법

arr.map(callback, [thisArg])

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

currentValue 현재 처리되고 있는 요소

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

array 메소드가 불려진 배열

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

Ex)

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

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

return num*num;

});

결과값: [1, 4, 9, 16, 25]

똑같은 원리로 배열을 매핑 할수 있다.

데이터 배열을 렌더링 할때는 map으로 간단하게.

render() { const mapToComponents = (data) =>{ return data.map((contact, i)=>{ return(<ContactInfo contact={contact} key={i}/>) }) }; return(<ContactInfo contact={contact} key={i}/>) ;

에서 key 를 포함 하는 이유는 리액트에서는 array에서 키로 아이템을 identify 해서 어떤 아이템의 상태변화가 있을때, 바로 알 수 있게 한다고 한다.

(참조: https://reactjs.org/docs/lists-and-keys.html#keys )

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

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

const listItems = numbers.map((number) =>

<li key={number.toString()}>

${number}

</li>

);

가장 좋은 방법은 아이템에 유니크한 id를 키로 부여하는 방법이다 (id가 있다면)

const todoItems = todos.map((todo) =>

<li key={todo.id}>

{todo.text}

</li>

);

아이템의 정렬 순서가 바뀔지도 모르기 때문에 인덱스를 키로 사용하는걸 권장하지 않는다. 하지만 key를 설정하지 않으면 default로 인덱스를 키로 사용한다.

https://youtu.be/i_ooWEUtCMc 를 보며 공부하며 정리 겸 작성하는 글입니다.

컴포넌트에서 유동적인 데이터를 보여줄때 사용됨

초기값 설정이 필수, 생성자(constructor) 에서 this.state = {} 로 설정

값을 수정할 때에는 렌더링 된 후에 this.setState({...} 가능. (즉 constructor 안에서, 렌더링 전에는 setState를 사용 불가능)

그리고 렌더링 된 후에는 this.state = 로 절대 수정 하지 말것 

(속도 및 React의 장점인 바뀐 부분만 업데이트 하는 걸 버리는 행위임 (forceUpdate 라는 메소드로 강제 업데이트가 가능하긴함))

예시)

class Counter extends Component {

  constructor(props) {

    super(props); 

    // super 를 통하여 부모인 Component의 생성자를 먼저 실행하고 할 작업들을 함.

    // super(props); 를 먼저 실행해줘야 이 메소드 안에서 this.state 라던지 props 라던지 를 접근할 수 있음.

    this.state = {

      value: 0

    };

    this.handleClick = this.handleClick.bind(this);

  }

  handleClick() {

    this.setState({

      value: this.state.value + 1

    });

  }

  render() {

    return (

      <div>

        <h2>{this.state.value}</h2>

        <button onClick={this.handleClick}>Press Me</button>

      </div>

    );

  }

}

class App extends Component {

  render() {

    return (

      <Counter />

    );

  }

};

ReactDOM.render(

  <App></App>,

  document.getElementById("root")

);