1. shared state 말 그대로 공유된 state 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 state를 공유해서 사용한다 shared state는 어떤 컴포넌트의 state에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우 가장 위에 있는 컴포넌트는 부모 컴포넌트이고, 아래 화살표로 연결된 2개의 컴포넌트는 자식 컴포넌트 부모 컴포넌트는 value라는 값을 가지고 있다. 왼쪽 아래에 있는 컴포넌트 A는 값에 2를 곱해서 표시하고, 오른쪽 아래의 B는 값에 3을 곱해서 표시한다. 이런 경우에 자식 컴포넌트들이 각각 값을 갖고 있을 필요는 없다. 그냥 부모 컴포넌트의 state의 값에 각각 2와 3을 곱해서 표시하면 그만이다 위 그림도 마찬가지로 3개의 컴포넌트가 있다 ..
1. 폼이란 무엇인가 우리말로 양식 보통은 회원가입을 하거나, 로그인을 할 때 위와 같이 텍스트를 입력하는 양식을 많이 볼 수 있다 텍스트 입력 뿐만 아니라 체크박스, select 등 사용자가 무언가 선택을 하는 것 모두 폼이라 생각하면 된다 폼은 사용자로부터 입력을 받기 위해 사용하는 것 2. 리액트와 HTML의 폼 리액트와 HTML에서 폼은 조금 차이가 있다 리액트는 컴포넌트 내부에서 state를 통해 데이터를 관리 HTML 폼은 엘리먼트 내부에 각각의 state가 존재함 이름: 제출 위 코드는 기본적인 HTML 폼 사용자의 이름을 입력받고 제출하는 간단한 코드 리액트에서도 잘 동작하나, 자바스크립트 코드를 통해 사용자가 입력한 값에 접근하기에는 불편한 구조 리액트가 자바스크립트 기반이라 자바스크립트..
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..
1. 훅이란 무엇인가 클래스 컴포넌트에서는 생성자 constructor에서 state를 정의하고 setState() 함수를 통해 state를 업데이트한다. 이처럼 클래스 컴포넌트는 state와 관련된 기능뿐만 아니라 컴포넌트의 생명주기 함수들까지 모두 명확하게 정의되어 있어서 잘 가져다 쓰기만 하면 된다 하지만 함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드도 굉장히 간결하며, 별도로 state를 정의해서 사용하거나, 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없었다 그래서 함수 컴포넌트에 이런 기능을 지원하기 위해 만든것이 훅이다. 훅을 사용해서 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현할 수 있게 된다. Hook이라는 영단어는 갈고리라는 뜻을 갖는다. 프로그래밍에서는 ..
딥러닝/머신러닝, 통계학, IT프로그래밍, 알고리즘을 좋아하는 사람 https://github.com/yundaehyuck
