천천히 느리게 천천히 느리게

◎ 저번에 구현했던 위스타그램을 react 코드로 옮겨놓았다. 이제 로그인 기능을 구현할 시간인데, 로그인을 하려면 input에 id랑 passwrod를 input에 입력을 하고 그 값을 가지고 로그인 조건에 만족해야 로그인이 되도록 구현을 해야 한다. 그러면 위스타그램 코드로 input을 어떻게 관리해야 하는지 알아보자. 1. input 다루기 ◎ 우선 위스타그램 코드를 보면서 이해해보자. onChange 이벤트는 input의 텍스트 값이 바뀔 때마다 발생하는 이벤트이다. 여기에 handleInput 함수를 설정을 하였다. haandleInput의 코드는 다음과 같다. onChange 이벤트가 발생하면, e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어 올 수 있다..

1. state ◎ state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 함수형 컴포넌트와 state를 다루는데 방법에 차이가 있어서 기록을 남기자. 2. state의 사용법 ◎ 동적인 데이터를 다룰 땐 바로 state를 사용한다. 함수형 컴포넌트에서도 연습했던 카운터 예제를 통해 연습해보자. CounterClass라는 컴포넌트를 만들고 코드는 다음과 같다. 위의 코드를 한번 살펴보자. 2-1. state 정의 ◎ constructor 에서 super(props)를 호출 한 이유는 , 우리가 컴포넌트를 만들게 되면서, Component를 상속했으며, 우리가 이렇게 constructor를 작성하게 되면 기존의 클래스 생성자를 덮어쓰게 된다. 그렇기에 리액트 컴포넌트가 지니고 있던 생성자를..

1. useState ◎ 컴포넌트에서 보여줘야 하는 내용이 사용자 인터렉션에 따라 바뀌어야 할 때 사용하는 함수가 useState이다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. useState라는 함수는 리액트의 Hoooks 중 하나이다. ※ Hook은 클래스 안에서 동작하지 않는다. 2. 예시 ◎ 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 구현해보자. 그다음엔 App에서 Counter를 렌더링 해보자. 2. 이벤트 설정 ◎ Counter에서 버튼이 클릭되는 이벤트가 발생했을 때, 특정 함수가 호출되도록 설정을 해보자. Counter 컴포넌트를 다음..

1. props ◎ props는 properties의 줄임말로, 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용해야 한다. 2. props의 사용법 ◎ 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 전달해주고 싶다고 해보자. 그러면, 다음과 같이 코드를 작성하면 된다. Hello 컴포넌트에서 name 값을 사용 하고 싶을 땐 어떻게 하면 되는지 코드를 작성해보자. 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회할 수 있다. props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면, props.name을 조회하면 된다. 3. 여러개의 props, 비구조화 할당 ◎ Hello 컴포넌트에 또 다른 props(color)를 전달..

1. 컴포넌트 만들기 ◎ component를 만들 때는 클래스 component와 함수형 component가 있다. 예전에는 클래스 컴포넌트를 사용하였지만 리액트에서 Hooks라는 개념이 등장하고부터 함수형 컴포넌트를 많이 사용하는 추세이다. 그래서 현재 많이 사용하고 있는 함수형 컴포넌트로 만들고 나중에 클래스 컴포넌트를에 대해 알아보겠다. 자, 이제 함수형 컴포넌트로 src 디렉터리에 Hello.js라는 파일을 만들어보자. 리액트 컴포넌트를 만들 때는 import React from 'react'; 를 통하여 리액트를 불러와 주어야 한다. 그리고 코드의 최하단에는 export defualt Hello; 를 통하여 Hello라는 컴포넌트를 내보겠다는 의미로 코드를 작성하여야 한다. 이렇게 해주면 다른 ..

1. React 란 ◎ React는 페이스북에서 개발한 유저 인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해 준다. 페이스북을 비롯하여 Airbnb, Netflix, Twitter 등 세계를 선도하는 서비스들이 React를 사용하고 있다. 그중에서도 에어비앤비와 넷플릭스는 페이스북 못지않게 React를 생태계에 적극적으로 기여하고 있다. 2. Framwork? Library? ◎ React가 프레임워크인지, 라이브러리인지 헷갈려하는 개발자도 있습니다. React는 Angular 같은 Framwork가 아니라 Library이다. Router처럼 웹을 만드는 게 꼭 필요한 도구들이 기본적으로 포함되어있지 않다. 그 대신 가볍고 무엇보다 훨씬 빠르게 배울 수 있다. 3. 특징..