개발/React.js(18)
-
[React.js] 0. Self Study
약 4년전쯤 React-Native를 통해 Android, IOS App을 만들어보았었지만, 자세하게 하나하나 확인하면서 만들지 않았었던 기억이 있었습니다. 알고보면 별거 아니었을 수도 있었겠지만, 이해하다보면 더 재밌는 것들을 발견할 수 있지 않을까 싶어 React 공식 문서를 통해 self study 를 시작합니다. React 게시물의 글들은 모두 React 공식 문서를 통해 재해석한 내용을 나중에 혼자 찾아볼 수 있는 용도로 씁니다~! 글에 잘못된 내용이 있을 수도 있으므로 해당 포스팅을 보시는 분은 꼭 공홈을 참고해주세요~! https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for build..
2021.07.19 -
[React.js] 3. Element Rendering (엘리먼트 렌더링)
Element 란 React 를 이루는 가장 작은 단위이다. React 자습서에 따르면 아래와 같은 표현을 사용하고 있었다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다. 이 말을 코드로 다시 되짚어 보면 React가 DOM에 어떻게 렌더링하고 있는지 알 수 있다. const element = Hello, world; ReactDOM.render(element, document.getElementById('root')); html 에서 div 태그안에 있는 root가 존재하고 있는데, React 를 통해 이 태그를 표현할 수 있게 된다. element 라는 JS..
2021.07.19 -
[React.js] 2. JSX란
const element = Hello, world!; 위는 Javascript를 확장시켜 만든 JSX 라고 불리는 녀석입니다. javascript 안에 마크업을 넣는 것처럼 보입니다. JSX는 아래와 같은 성격을 가집니다. 1. 중괄호 - name 이라는 변수를 중괄호안에 넣어 JSX인 element에 담아서 사용 - JSX 중괄호 안에서는 Javascript 표현식을 모두 사용 가능 const name = 'KHAN'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); - 아래와 같이 함수 호출 결과, 객체도 모두 엘리먼트에 포함 가능 function formatName(user) { r..
2021.07.18 -
[React.js] 1. Hello World
React.js 를 시작하기에 앞서 다른 언어와 동일하게 Hello World를 출력해봅니다. 준비물 : Atom (선호하는 Editor아무거나 상관없습니다.) 사전지식 : html, css, jacascript (vanilla JS) 1. html 예제 template 작성 2. React script 작성 ReactDOM.render( Hello, world!, document.getElementById('root') ); 3. 전체 코드 및 결과 코드를 찬찬히 보면 react를 CDN 방식으로 불러오고, React를 babel로 빌드시키기 위해 아래 세줄이 들어간 것을 볼 수 있습니다. body 태그안에 있는 div와 script를 자세히보면, "root" 라는 id를 통해서 넘겨 주는것처럼 보입니..
2021.07.18 -
[React.js] Express ejs + React component
목적기존에 개발하던 페이지에 React Component가 필요할 때 간편하게 추가해서 사용하기 위함. 하나의 앱을 전부 React로 구성하지않고 필요한 곳에서만 사용하기에 좋음.React Package를 개발환경에 구축하지 않고 사용할 수 있음. 필요한 내용- Express 파일 경로 구성 - React Component 생성 (기존 프로젝트에 추가하기 위해서는 React Component파일에서 2줄만 추가하면 된다.)- Component가 필요한 위치 설정 첫번째 - 필요한 Component 작성React 공식 홈페이지에서 예시로 만들어준 Component를 사용합니다. 12345678910111213141516171819202122232425'use strict'; const e = React.c..
2018.12.31 -
[React.js] React 시작하기
React.js을 위한 준비물1. Node.js https://nodejs.org/ko/ 이곳에서 다운받을 수 있다. 2. Yarn조금 더 개선된 버전의 npm이라고 한다.https://yarnpkg.com/en/docs/install#windows-stable 이곳에서 다운받을 수 있다. 3. 코드 에디터개인적으로는 ATOM을 써본 경험이 있어서 ATOM을 쓴다. 하지만 VSCode, Webstorm, sublime 등의 선택지가 있다고 한다.ATOM : https://atom.io/ React.js 앱 만들기최근에 react.js에서 공식적으로 인정한 도구가 있다. create-react-app이라고 이 도구를 이용하면 빠르게 리액트 앱을 구성할 수 있다. react.js 공식 홈페이지create-r..
2018.12.26