기본 콘텐츠로 건너뛰기

[React] 시작 전 준비 마지막 및 정리 ( JSX , ReactDOM.render )

[React] 시작 전 준비 마지막 및 정리 ( JSX , ReactDOM.render )

안녕하세요

React 시작 전 준비 단계 3번째 입니다. JSX , 그리고 ReactDOM.render 및 제가 사용하면서 궁금했던 것들에 대해

그리고 이제까지 1,2단계에서 봤던 것들 정리 차원입니다.

리액트 시작 전 리스트 체크

1. 준비물 챙겼는지?

IDE - vscode (관련 플러그인, ESLint, Guides)

Node.js 설치

CRA(create-react-app) 설치

create-react-app 설치 후

> 1. create-react-app basic-react

> 2. cd basic-react

> 3. npm start

> 짜잔. Hello React

github(깃허브)

JS,HTML5,CSS3

> ES6

이외 사용 도구들 (시작하고 알아보기)

> webpack,babel ...

2. 리액트는 왜하는건지?

노마드 코더의 말을 빌리자면 매우 멋진 UI 라이브러리이며 그냥 js만 잘하면 다 할수 있다. 모든 화면들을

컴포넌트화 하여서 쪼개서 사용이 가능하다 vue. angular는 그에 따른 문법을 배워야 하지만 리액트 는 그렇지 않다.

또한 리액트는 View만을 위한 라이브러리 이기 때문에 다른 프레임워크와 같이 사용이 가능 하다.

3. 리액트 (create-react-app)

3-1 모든 컴포넌트는 Component를 상속 받아야 한다.

class tempComponent extends Component

3-2 모든 컴포넌트는 render () 함수가 있다.

render() {}

3-3 import React, { Component,Fragment } from 'react'; 는 필수

상속도 받고 render 부모로 Fragmnet 사용

4. JSX

리액트에서 사용 되는 문법으로 마치 HTML 을 쓰는 것과 같지만 다른점이 하나있다.

기존 HTML에서는 여러 줄 입력시

''+

'' 식을 거치지만 JSX에서는

와 같은 직접 HTML을 쓰는것 처럼 보이는 형태를 띄기 때문이다.

4-1 주석

주석은 단순하게 /* */ 가 아니라 { /* */ } 와 같이 작성한다.

4-2 위젯 생성

- 단순 버튼 생성

render() {

return(

);

}

- js를 통한 생성

const btnArr =[ "첫번째" , "두번째" , "세번째" ];

const listinputTag = btnArr . map ( item => < input type = "button" style = { btnStyle } value = { item + 1 } key = { item + 1 } > );

render(){

return(

{listinputTag}

);

}

- CSS 속성 입히기 (외부 스타일)

App.js

< div className = "react-CSS" > 여기는 div입니다.

App.css

.react-CSS { width : 550px ; height : 200px ; color : white ; background-color : black ;

}

- CSS 속성 입히기 (인라인 스타일)

App.js

const btnStyle = { backgroundColor: "#fafafa" , border : '1px solid #d3dbdf' , padding: '8px 13px 9px 15px' , margin: '0px 2px 0px 0px' , whiteSpace: 'nowrap' , fontWeight: '600' , cursor: 'pointer' , height: '50px' , width: '100px' , borderRadius: '3px' , WebkitTransition: 'all' , MozTransition: 'all' , msTransition: 'all' };

< button style = { btnStyle } type = "button" value = "test" />

index.js (ReactDOM.render)

ReactDOM.render : 리액트 돔 말그대로 React코드를 DOM (Document Object Model) 에 붙이는 역할을 합니다.

다른 의미로 IOS나 AOS같은 모바일에 붙이는 경우는 ReactNative.render(?) 가 있었던것처럼

화면구성은 React + Component 로 구성하고 붙이는 지점은 브라우저냐 모바일이냐 에 따라서

ReactDOM 이냐 ReactNative로 갈리는 것 같습니다. 완전한 분리 좋네요

import React from 'react' ; import ReactDOM from 'react-dom' ; import './index.css' ; import App from './App' ; import registerServiceWorker from './registerServiceWorker' ;

ReactDOM . render ( < App /> , document . getElementById ( 'root' )); registerServiceWorker ();

ReactDOM.render(만든컴포넌트, document.getElementById('root'))로 되어있는데

root는 어디있을까 했더니 public 폴더에 index.html 에 있는 에 붙는 것으로 보입니다.

결과 App.js

import React, { Component, Fragment} from 'react'; import './App.css'; // [React] 시작 전 준비 3단계( JSX && 스타일) class App extends Component { render() { const isButton = true; const btnArr=["첫번째","두번째","세번째"]; const btnStyle = { backgroundColor:"#fafafa", border : '1px solid #d3dbdf', padding: '8px 13px 9px 15px', margin:'0px 2px 0px 0px', whiteSpace:'nowrap', fontWeight:'600', cursor:'pointer', height: '50px', width:'100px', borderRadius:'3px', WebkitTransition:'all', MozTransition:'all', msTransition:'all' }; const listinputTag = btnArr.map(item => ); const listbuttonTag = btnArr.map(item=> {item+1} ); // [...new Array(10)].map(x => 0); const btnCnt = 3; const countBtn = Array(btnCnt).fill(null).map( (i,idx) =>{ let btnKey = "Count_"+idx; return Cnt_{idx} } ); return ( { isButton ? '버튼이 있다': '버튼이없다'} { isButton && '버튼이 있다'} {/* 버튼이 있기 때문에 해당 버튼을 생성 btnCnt만큼 */} 'map 을 통하여 버튼 렌더링 input 태그 btnArr=[1,2,3];' {listinputTag} 'map 을 통하여 버튼 렌더링 button 태그 btnArr=[1,2,3];' {listbuttonTag} count 변수를 통하여 버튼 렌더링 button 태그 현재 cnt : {btnCnt} {countBtn} 여기는 div입니다. ); } } export default App;

from http://ipex.tistory.com/175 by ccl(S) rewrite - 2020-03-06 12:20:41

댓글

댓글 쓰기

이 블로그의 인기 게시물

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자...

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자... Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 팀 내 뛰어난 풀스택 개발자분들이 Angular.js, Python, MySQL 모두 작업 가능하시니 오셔서 함께 배우며 즐겁게 작업하시면 됩니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. 개발 업무: 레터플라이의 핵심 기능인 편지, 사진을 제작하는 레터에디터, 포토에디터 개발. 이 기능들은 "모바일 웹을 통한 출력제품 생산 자동화 기술"(특허 출원 준비중)로서 레터플라이에서 자체개발했습니다. 근무 지역: 광화문역 5번출구 바로 앞 근무 환경: 책임과 존중을 중요시하는 수평적인 분위기, 도전적이며 서로에게 배우는 문화 근무 시간: 10-19시, 출근시간 자유 지정. 급여: 연봉/스톡옵션 협의 지원 방법: 팀 지원하기 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/721 by ccl(A) rewrite - 2020-03-20 09:20:18
댓글 쓰기
자세한 내용 보기

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증...

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증... django 는 기능이 참 너무 많다 ^^; 지금은 서버는 django로, 프론트는 angular를 붙여서 간단한 웹을 만들어 보려고 한다. 웹 만들때 항상 회원가입/로그인 기능은 맨 앞에 구현한다. 어떻게 구현하면 좋을까... 찾아보다가 이 기능을 구현할 수 있는 방법이 너무 많아서 정보를 찾기 더 어려웠다. 일단 나는 django에서 django rest framework라는 것을 사용해서 API를 만드려고 한다. 순수 django 튜토리얼에는 바로 template 랑 연결해서 설명하는 부분이 많았다. 나는 그냥 API 만 만들고 싶다고!! 그래서 찾은 것이 django REST framework. https://www.django-rest-framework.org/api-guide/authentication django REST framework 설치 using pip pip install djangorestframework settings.py INSTALLED APPS 에 추가해야함 INSTALLED_APPS = [ ... 'rest_framework', ] django REST framework 에서도 인증 관련해서 제공하는 것이 1개가 아닌 여러 개다. 나는 그중에 TokenAuthentication을 이용해서 로그인을 구현해 보려고 한다. TokenAuthentication Token authentication is appropriate for client-server setups, such as native desktop and mobile clients. 이렇게 나와있어서 내가 하려는 것과 일치해서 이걸로 결정 ~ 솔직히 처음 로그인을 구현하려고 하면 도대체 그 과정이 어떻게 되는지 모를 수 도 있다. 나는 쉽게 정리하면 아래와 같은 과정이라고 생각한다. 로그인 로그아웃...
댓글 쓰기
자세한 내용 보기

[020] 파동함수를 쓰기

[020] 파동함수를 쓰기 [020] 파동함수를 쓰기 [020] 파동함수를 알면 우리가 원하는 뭔가를 알 수 있다고 했는데, 정작 파동을 함수로 쓰는 것은 아직 다루지 않았고, 양자역학 내용을 좀 더 진행하려면 왜 파동이 삼각함수로 써 지는지를 한번은 정리를 해야겠다. 수학이 많이 나올 예정이다. 앞에서 파동함수를 아래 형태로 쓸 수 있다고 했었는데, 왜 이런 형태가 되는지 알아보자. [020-01] 파동함수 사인파의 일반형은 코사인 (cos) 을 이용해 쓰지만, 사인 (sin) 과 코사인은 위상차이만 있는 함수들이고, 우리는 앞으로 사인을 이용해 문제를 풀 예정이라 사인을 이용하기로 한다. 파동함수는 양자역학에서 갑자기 나온 말이 아니고, 원래 파동을 함수의 형태로 쓴 것을 파동함수라고 부른다. 파동-입자 이중성을 가지니까 기존에 파동을 함수의 형태로 쓰던 그 모양을 가져다 쓴 것. 주교재의 16장에 있는 내용이다. [020-02] 펄스 - Pulse 아래와 같이 하나의 진동이 왼쪽에서 오른쪽으로 진행하는 상황을 생각해보자. 시간 t 일 때, 위치 x 의 밧줄의 높이를 y 라 하고, 셋의 관계를 기호로 쓰면, 그러면 아래의 관계가 성립한다. 이게 무슨말이냐면, 시간 t 일 때 위치 x 의 밧줄의 높이 와 시간 0 일 때 위치 x-vt 의 밧줄의 높이가 같다 는 말인데, 그림으로 보면, 왼쪽은 시간 0, 오른쪽은 시간 t 이고, t 일 때 P 의 높이와 0 일 때 높이가 같다는 것. [020-03] 파동을 식으로 써보자. 아래의 파동을 보자. 지금 내용부터는 사인이든 코사인이든 상관없는데, 위 그림이 사인이니까 아래의 식 으로 쓸 수 있다. A는 진폭이고, 주기, 진동수, 파장 같은 값을 아직 모르니까 a 는 아직 정해지지 않은 값 이다. 일반적으로 알고있는 삼각함수는 가로축이 각도 이지만, 우리는 공간을 진행하고 있는 파동을 다루니까 위의 형태로 써진다고 생각하자. x=0 에서 진폭이 ...
댓글 쓰기
자세한 내용 보기