1. 리스트와 키 컴퓨터 프로그래밍에서 "같은 아이템을 순서대로 모아놓은 것이 리스트" 리스트를 위해 사용하는 자료구조가 바로 배열(array) 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 const numbers = [1,2,3,4,5]; key는 열쇠라는 뜻 열쇠는 모두 다 모양이 다른 고유한 형태 이와 같은 맥락으로 컴퓨터 프로그래밍에서는 key는 각 객체나 아이템을 구분할 수 있는 고유한 값 리액트에서는 이런 배열과 키를 사용해서 반복되는 다수의 엘리먼트를 쉽게 렌더링 할 수 있다. 2. 여러 개의 컴포넌트 렌더링 아래 그림에서 A,B 컴포넌트가 반복적으로 나오고 있다. 당연하지만 같은 컴포넌트를 화면에 반복적으로 나타내야 할 경우에, 코드 상에 하나씩 직접 넣는 것은 같은 코드..
1. 조건부 렌더링 조건에 따른 렌더링 어떠한 조건에 따라 렌더링이 달라지는 것 조건문의 결과 true아니면 false인데 이 결과에 따라 렌더링을 다르게 하는 것 function UserGreeting(props) { return 다시 오셨군요! } function GuestGreeting(props) { return 회원가입을 해주세요. } 위 코드에서는 UserGreeting과 GuestGreeting 두개의 함수 컴포넌트가 있다 UserGreeting은 이미 회원인 사용자에게 보여줄 메시지를 출력하는 컴포넌트이고 GuestGreeting은 아직 가입하지 않은 게스트 사용자에게 보여줄 메시지를 출력하는 컴포넌트이다. 회원인지 아닌지에 따라 2개의 컴포넌트를 선택적으로 보여줘야할 것이다. functi..
1. DOM의 이벤트 DOM에서는 클릭 이벤트를 처리할 함수를 onclick을 통해 전달시킴 Activate 위 코드는 버튼이 눌리면 activate()라는 함수를 호출하도록 되어 있다 2. 리액트에서 이벤트 onclick 대신 onClick으로 카멜 표기법 DOM에서는 이벤트 처리 함수를 문자열 그대로 전달하지만, 리액트에서는 {}를 사용해서 함수 그대로 전달 Activate 3. 이벤트 핸들러 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 혹은 이벤트가 발생하는 것을 계속 듣고 있는다는 의미로 이벤트 리스너(event listener)라고도 부름 class Toggle extends React.Component { constructor(props){ super(props); this.stat..
딥러닝/머신러닝, 통계학, IT프로그래밍, 알고리즘을 좋아하는 사람 https://github.com/yundaehyuck
