Today Learning _ Part 12-8. 리액트 살펴보기(Form) HTML의 폼 엘리먼트는 자체가 내부 상태를 가지기에 React의 다른 DOM 엘리먼트와 조금 다르게 동작합니다. 위의 폼은 사용자가 제출하면 새로운 페이지로 이동하는 동작을 수행합니다. React에서 동일한 동작을 원한다면 그대로 사용해도 괜찮습니다. 하지만 대부분 Javascript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리합니다. 이를 위한 표준 방식이 "제어 컴포넌트(controlled components)"라고 불리는 기술을 이용하는 것입니다. 제어 컴포넌트(Controlled Component) HTML에서 input, textarea, select와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. .. Today Learning _ 2020. 3. 21. Part 12-7. 리액트 살펴보기(리스트와 Key) Javascript에서 리스트를 변환하는 법 아래는 map() 함수를 이용해 numbers 배열의 값을 두배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그를 확인하는 코드입니다. 리액트에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일합니다. 여러 개의 컴포넌트 렌더링 하기 엘리먼트 모음을 만들고 중괄호 {}를 이용해 JSX에 포함시킬 수 있습니다. Javascript map() 함수를 사용해 numbers 배열을 반복 실행합니다. 각 항목에 대해 엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장합니다. 이후 listItems 배열을 엘리먼트 안에 포함한 후 DOM을 렌더링 합니다. 기본 리스트 컴포넌트 일반적으로 컴포넌트 안에서 리스트를 렌더.. Today Learning _ 2020. 3. 19. Part 12-6. 리액트 살펴보기(조건부 렌더링) React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 애플리케이션의 상태에 따라 컴포넌트 중 몇 개 만을 렌더링 할 수 있습니다. 리액트에서 조건부 렌더링은 Javascript에서의 조건 처리와 같이 동작합니다. if나 조건부 연산자와 같은 Javascript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데 사용할 수 있습니다. 이후에 리액트는 현재 상태에 맞게 UI를 업데이트해서 보여줄 것입니다. 아래의 두 컴포넌트가 있습니다. 이 코드를 보면 Greeting 컴포넌트에서 UserGreeting 컴포넌트와 GuestGreeting 컴포넌트를 if문의 결과 값에 따라 사용한다는 것을 알 수 있습니다. 변수 isLoggedIn의 값이 true일 경우 UserGreeting의 값이 나타.. Today Learning _ 2020. 3. 19. Part 12-5. 리액트 살펴보기(이벤트 처리하기) React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트와 매우 유사합니다. 다만 몇 가지 문법적인 차이는 존재합니다. - React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. - JSX를 사용해 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. - React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault()를 명시적으로 호출해야 합니다. 일반적으로 HTML에서는 새 페이지를 여는 링크의 기본 동작을 방지하기 위해 return의 값으로 false를 줍니다. 하지만 react의 경우는 SPA(Single Page Application)이므로 페이지가 넘어가는 것을 방지해야 합니다. 따라서 preventDefault를 작성해서.. Today Learning _ 2020. 3. 18. Part 12-4. 리액트 살펴보기(State 와 Lifecycle) State는 props와 유사해 보이지만 State는 컴퓨터 내부에서 사용하는 자료이므로 비공개 자료이다. 그리고 State는 데이터를 수정할 수 있는 공간이라고 할 수 있다. 즉, props가 component에 정보를 전달한 후 DOM으로 호출된다고 할 수 있다. 이때 component 안에 들어 있는 것이 State이다. 따라서 State는 컴포넌트에 의해 완전히 제어된다. 컴포넌트 캡슐화 메인 어플리케이션으로부터 독립되어 있는 컴포넌트를 의미합니다. 이를 통해 컴포넌트 내부에서 발생하는 업데이트, 테스트 케이스, 재사용에 용이하게 컴포넌트를 설계할 수 있습니다. Clock 컴포넌트를 재상요하고 캡슐화하는 방법을 알아보도록 하겠습니다. 함수에서 클래스로 변환하기 다섯 단계로 Clock과 같은 함수 .. Today Learning _ 2020. 3. 17. Part 12-3. 리액트 살펴보기(Components 와 Props) 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 Javascript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. function component와 class component 컴포넌트를 정의하는 가장 간단한 방법은 Javascript 함수를 작성하는 것입니다. 함수는 데이터를 가진 하나의 props(속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. function Welcome(props) { return Hello, { props.name } ; } 이런 컴포넌트는 .. Today Learning _ 2020. 3. 16. Part 12-2. React 살펴보기(엘리먼트 렌더링) element는 React 앱의 가장 작은 단위입니다. 또한 화면에 표시할 내용을 기술하기도 합니다. const element = Hello, react! ; 브라우저 DOM 엘리먼트와 달리 React는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. ** 컴포넌트와 엘리먼트를 혼동할 수 있지만, 엘리먼트는 컴포넌트의 구성 요소이다. DOM에 엘리먼트 렌더링 하기 HTML 파일에 id가 root인 div가 있습니다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기에 이것을 ROOT DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려.. Today Learning _ 2020. 3. 14. Part 12-1. React 살펴보기(JSX의 이해) REACT란? - 컴포넌트 기반의 아키텍처 = 템플릿 언어가 아닌 자바스크립트로 컴포넌트를 작성한다. = 특정 관심사에 집중된 기능 블록. 즉, 관심사를 분리할 수 있다. 여기서 관심사는 컴퓨터 프로그램 코드에 영향을 주는 일련의 정보를 의미한다. "애플리케이션의 하드웨어 세부 사항"이나 "인스턴스화 할 클래스 이름"과 같은 것. - JSX 사용 - Virtual DOM - 단방향 데이터 흐름을 지향 JSX란? const element = Hello, world! ; 위의 태그 문법을 JSX라 부르며 Javascript를 확장한 문법이다. JSX라고 하면 템플릿 언어라고 생각할 수 있겠지만 Javascript의 모든 기능이 포함되어 있다. 그리고 React 엘리먼트(element)를 생성한다. React.. Today Learning _ 2020. 3. 14. 이전 1 2 3 4 다음
