Language/React16 [React 공식 Doc 가이드 #6] State and Lifecycle - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Clock 예제 다시 살펴보기 이전예제에서 1초 마다 시간을 보여주던 예제를 기억하는가? Rendering Element 에서 UI를 업데이트 하기 위해 ReactDOM.render()를 호출하였다. 이번 Section 에서는 실질적으로 재사용할 수 있고 은닉화(API 를 만듦에 있어서 필요한 정보외에는 client가 알아야 되는 부분을 최소화 하는)된 Clock component 를 만들어 볼것이다. 기능은 이전 예제와 똑같지만 Component 자체에서 timer를 설정하고, 갱신되게 만들어보자. 일단 여태까지 Component를 정의하고 사용해봤으니 Cloc.. 2021. 2. 11. [React 공식 Doc 가이드 #5] Components and Props - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Component의 정의 Component는 UI 적으로 독립적이고 재사용할 수 있는 단위이다. 개념적으로 component는 Javascript function 과 같다. "props" 로 불리는 임의의 input 들이 있고, Screen에 보여지는것을 정의하는 React element Return 하면 이를 Component 라고 한다. - Function and Class Component component 를 정의하는 가장 Simple 한 형태는 Javascript 함수를 작성하는 것이다. 문서에서는 위의 Welcome function을 "유효한" Reac.. 2021. 2. 11. [React 공식 Doc 가이드 #4] Rendering Elements - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Element 여태까지 간단한 element를 선언하고, 이를 Hello, world를 표현하는데 사용하였다. element란 무엇인가? element란 screen 에서 출력하는 바를 묘사하는 것이 element 라고 정의하고 있다. DOM element 와 다르게 React element는 plain object 라서 만드는데 비용이 싸다. React DOM은 DOM 을 변경할 때 React element 와 비교하여 DOM 을 업데이트 한다. - Component vs Element 일반적으로 element 와 component를 헷갈려 한다. element.. 2021. 2. 11. [React 공식 Doc 가이드 #3] Introducing JSX - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - JSX 는 꼭 써야 하는가? 아래태그는 string 이나 HTML이 아닌 JSX(Java Script eXtension) 이다. 사실 React를 사용할 때 JSX는 필수 Spec은 아니다. JSX를 쓰는데는 크게 2가지 이유가 있는 것 같다. 1. Javascript Code 안에 UI 관련코드가 들어 갈 때 가독성을 높여준다. JSX 를 안쓰면 아래와 같은 코드를 읽어야 한다. 물론 실제 Project 에서는 위와 같이 쓰지않고, template 엔진을 쓰겠지만 JSX 를 쓰던 다른 template 엔진을 쓰지 않는다면 위와 같이 UI 코드가 Javascrip.. 2021. 2. 11. [React 공식 Doc 가이드 #2] Hello World - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Project 폴더 살펴보기. 공식홈에서는 React 가장 기본 코드로 아래와 같은 예제를 준다. Javascript 에 대한 기본적인 지식이 있다면(공식 홈페이지에서도 기본적인 Javascript 지식을 선요구 하고 있다.) ReactDOM.render 와 같은 문법은 몰라도 대충 아래와 같이 예상할 것이다. " 이던 다른 태그이던 id="root" 로 되어있는 tag가 있고 여기에 Hello, world!을 그릴 것이다." 이전글에 설정했던 폴더를 살펴보자. 난 그냥 문법만 익히고 싶고, index.html 에서 소스만 바꾸면서 예제의 결과값만 보길 원했는데 .. 2021. 2. 11. [React 공식 Doc 가이드 #1] Installation - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - 기본 요구사항 React 를 설치하는 방법에는 Script 추가와 npm 을 이용한 방법이 있다. React를 학습하기 위한 목적이므로 npm을 이용하여 설정해보자. React 튜토리얼이므로 npm이 설치되어있다고 가정한다. (공식홈에서는 Node >= 6, npm >= 5.2를 요구하고있다. 2019.02.24일 기준) - 설치 자신이 Project를 생성할 적당한 폴더에서 아래 명령을 입력한다. npx create-react-app test-create 위의 줄에서 npx는 npm의 오타가 아니다.(나도 몰라서 그렇게 생각함.) test-create 부분은 본.. 2021. 2. 11. 이전 1 2 다음
