react.js15 React.js - 리액트, 클래스형 컴포넌트(Class Component)란? 클래스형 컴포넌트 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간은 클래스형 컴포넌트에 대해 알아보겠습니다. 기본적으로 클래스형 함수는 state, lifeCycle 관련 기능 사용을 사용 가능하다는 점이 있습니다. 그리고 함수형 컴포넌트보다 조금 더 메모리 자원을 많이 사용하는 큰 특징이 있습니다. ● 2. 클래스형 컴포넌트를 만드는 방법은 맨 앞에 class 사용하면서 시작합니다. 그리고 "render()" 메서드를 사용합니다. 이 메서드를 통해서 JSX을 렌더링 할 수 있습니다. props를 조회할 때 this를 사용하는 특징이 있습니다. 1번 라인 : class로 시작합니다. 2번 라인 : render() 메서드를 사용합니다. class ClassComponent extends React.. 2021. 2. 13. React.js - 엘리먼트(element) 업데이트 예제 리액트가 엘리먼트를 업데이트 하는 방법 안녕하세요. 고코더 입니다. ● 1. 리액트에서 엘리먼트를 랜더링을 합니다. 그러면 뷰를 통째로 날리고 다시 새롭게 뷰를 만들어준다고 배워왔습니다. 그리고 만약 변경된 부분이 적다면 이를 감지하고 해당 부분만 변경하여 업데이트 한다고 말했습니다. 오늘은 이 부분을 테스트 해보겠습니다. 리액트의 특징 중에 하나는 엘리먼트(element)에 생성된 속성(attribute)을 변경할 수 없습니다. 그저 새롭게 뷰를 만들어 업데이트 시키는 방법이 유일합니다 ● 2. 이 부분을 소스로 설명해보겠습니다. 1번 라인 : time 이란 메서드를 생성합니다. 5번 라인 : 현재 시간을 가져오는 자바스크립트를 만듭니다. 8번 라인 : 이를 루트 노드에 랜더링 합니다. 14번 라인 :.. 2021. 1. 26. React.js - ReactDOM.render() 메서드 ReactDOM.render()란? 안녕하세요. 고코더 입니다. ● 1. ReactDOM.render() 함수를 통해 Web API(document.createElement)를 사용하여 웹 브라우저에 그려주는 함수입니다. React.createElement를 통해 Object를 생성하고 이를 In-Memory에 저장합니다. Root DOM Node에 랜더링 하기 위해서 이를 사용합니다. 지금까지 따라한 예제에서 루트 DOM 노드에 이 메서드를 사용했었습니다. ● 2. 그렇다면 해당 ReactDOM.render() 메서드의 파라미터 형태를 함께 알아보겠습니다. 2번 라인 : 화면에 그려질 리액트의 element를 말합니다. 3번 라인 : 리액트 element를 해당 container DOM에 랜더링 합니다.. 2021. 1. 24. React.js - DOM에 Element 랜더링 하는 방법 리액트 돔에 엘리먼트 랜더링 하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 엘리먼트(element)를 DOM에 랜더링 하는 부분을 알아보겠습니다. 엘리먼트는 리액트에서 애플리케이션을 구성할 때 가장 작은 단위입니다. 이를 통해 화면을 구성하고 완성합니다. 제 블로그에서 학습하시던 분들은 이전 소스에서 이미 계속적으로 엘리먼트를 DOM에 랜더링을 자연스럽게 하고 있었습니다. ● 2. 랜더링 하는 소스를 살펴보겠습니다. 1번 라인 : 엘리먼트를 작성합니다. 2번 라인 : 리액트 DOM의 노드에 랜더링 합니다. const element = Hello, react!; ReactDOM.render(element,document.getElementById("root")); ● 3. 랜더링 된 DIM은 r.. 2021. 1. 23. React.js - JSX를 사용하지 않고 createElement를 사용하기 JSX를 대신해서 리액트 object 형태로 표현하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX를 사용하지 않고 리액트로 엘리먼트를 생성하여서 사용하는 방법을 알아보겠습니다. 다시 말하면 JSX는 리액트에서 필수가 아닙니다. 쉬운 개발과 성능의 이점때문에 대부분의 리액트 환경에서 JSX를 사용하는 것입니다. 저와 배워보는 리액트들도 JSX를 기준으로 예제를 만들어 갈것입니다. 그래도 JSX 없이 어떻게 element를 생성하는지 알아보겠습니다. ● 2. JSX를 사용했을 때 사용했던 간단한 방식입니다. HTML을 그대로 사용하면 되는 방식이었습니다. 덕분에 새롭게 문법을 배울 필요가 없었습니다. const jsxElement = JSX Element ● 3. 하지만 만약 리액트의 기능을 .. 2021. 1. 22. React.js - JSX에서 스타일을 지정하는 방법 / inline Style 사용법 JSX에서 style 속성에 값을 주는 방법 안녕하세요. 고코더 입니다. ● 1. JSX에서는 스타일 시트 즉 CSS를 Inline 형식으로 입력하는 방법을 알아보도록 하겠습니다. 흔히 HTML과 CSS를 배울 때 태그에 style이란 속성 값을 선언하고 안에 디자인할 내용을 채워 넣습니다. ● 2. 예를 들면 이렇습니다. 많이 보던 방식입니다. 1번 라인 : 문자열을 빨간색으로 바꾸는 스타일을, 배경은 검은색을 적용합니다. Inline stylesheet ● 3. 하지만 JSX에서는 인라인 방식의 CSS를 Object 형식으로 만들어서 직접 태그에 넣는 방식의 인라인 스타일 방식이 사용 가능합니다. 이렇게 하면 가독성도 좋고 개발하기도 매우 편리합니다. 그 방법을 알아보도록 하겠습니다. 1번 라인 : .. 2021. 1. 22. React.js - JSX에서 주석 사용하기 JSX에서 주석 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX에서 주석을 사용하는 방법을 알아보겠습니다. JSX는 자바스크립트 기반입니다. 그러므로 주석도 스크립트에서 사용하는 방식입니다. 주석은 개발자들의 흔적을 남길 수 있고 지우는 대신에 주석을 처리함으로 실행되지 않게 할 수 있습니다. ● 2. 단일 행을 처리하는 주석입니다. 한 줄 한줄 사용 가능합니다. //단일행 주석 ● 3. 복수행을 처리하는 주석입니다. 여러 줄을 처리하는 복수행 주석을 사용합니다. /* 복수행 주석 */ ● 4. 예제 소스를 함께 살펴보겠습니다. 3번, 4번 라인 : 복수행 주석을 사용하여 2개의 줄을 한 번에 주석 처리했습니다. 5번 라인 : 중괄호 안에 자바스크립트에도 사용 가능 6번 라인 : 단일행을 주석.. 2021. 1. 20. React.js - JSX에서 자바스크립트 문법 사용하기 JSX에서 javascript 문법 사용 안녕하세요. 고코더 입니다. ● 1. JSX는 자바스크립트와 XML이 합쳐진 확장 문법이라고 배웠습니다. 그러므로 JSX에서는 자연스럽게 자바스크립트의 모든 문법을 지원합니다. ● 2. 그러므로 자바스크립트에서 사용하는 제어문인 IF부터 함수를 만드는 function까지 모두 사용이 가능합니다. 예제 소스를 함께 살펴보겠습니다. function getGuest(user) { if (user) { return Hi {user}!; } return HI! Guest; } const element = {getGuest()}; //const element = {getGuest("GoCoder")}; ReactDOM.render( element,document.getEle.. 2021. 1. 20. React.js - JSX에서 자바스크립트를 사용하는 방법 / 중괄호{} JSX에서 JavaScript 를 사용하기 안녕하세요. 고코더 입니다. ● 1. JSX에 대해 알아보았습니다. 자바스크립트와 XML 합성어로 만들어진 단어인 만큼 당연히 JSX에서는 스크립트를 사용할 수 있습니다. 하지만 규칙이 있고 방법은 어려운 부분은 아닙니다. 간단한 예제를 통해서 쉽게 학습할 수 있습니다. ● 2. JSX 태그안에서 중괄호 "{}"는 자바스립트를 사용할 수 있도록 합니다. 일종의 약속입니다. 이 부분만 안다면 자바스크립트를 원하는 곳에 자연스럽게 입력할 수 있습니다. 예제를 한번 살펴보겠습니다. ● 3. 스크립트 영역에서 name 이라는 변수에 "GoCoder"라는 텍스트를 입력하고 이를 element안에 변수를 함께 넣어서 문자열을 만들었습니다. 자바스크립트를 JSX 태그 안에 .. 2021. 1. 20. 이전 1 2 다음
