웹 애플리케이션

• PWA(Progressive Web App)
  • Model View Controller (MVC)
    • 모델 : 사용되는 데이터와 데이터를 처리하는 모델, 데이터 단
    • 뷰 : 화면에 보이는 부분, UI
      • 모델과 뷰가 연결되어 있기 때문에 모델에서 값이 바뀌면 뷰에서도 바뀐다.
      • 이러한 형태를 ‘양방향 데이터 바인딩’이라고 합니다.
    • 컨트롤러 : 사용자의 행동 및 이벤트를 처리하는 부분
    • 단점 : 모델과 뷰의 의존성을 지님, 심플한 구조에서는 좋지만 대형 프로젝트가 되는 경우 복잡해집니다.
      • 컴포넌트의 영향을 추적하기가 어렵습니다.

React

• Virtual DOM
  • 기능적 관점의 이점을 지닙니다.
    • HTML을 수정하지 않고 일부만 수정하는 방식
    • React.js가 기존의 페이지와 사용자가 컨트롤한 페이지 간의 차이를 비교 및 판단하고 수정해줍니다.
  • UX 적인 강점을 지닙니다.
• 아키텍처에 대한 고민을 일부 해결해줍니다.
• 컴포넌트
  • 직관적인 UI. 구성요소를 기준으로 제작할 수 있으며, 코드를 재사용할 수 있습니다.
• State Manage
  • 컴포넌트 단위 데이터 관리 및 앱 전체 수준에서 공통 데이터를 상태로 관리
• CDN
  • 온라인 상에서 주소만 있으면 접근이 가능하도록 만들어진 환경

React 기초

• 클래스형 컴포넌트
  • 올드한 패턴
• 함수형 컴포넌트

  • 최신 패턴

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    function hellowWorldButton() {
    	return React.createElement('button',
    		{ onClick:() => {}},
    		"Hello World!"
    	)
    }

const rootContainer = document.getElementById('react-root')

ReactDOM.render(React.createElement(helloWorldButton), rootContainer)

• 상태 관리
  • 비구조화 할당

    function returnOneOneArray() {
    	return [1, 1];
    }
    
    const [a,b] = returnOneOneArray() // a=1, b=1

  • 컴포넌트 상태 설정

    • .useState() : 컴포넌트의 상태를 설정하는 메서드
      - 내부 파라미터는 초기값을 의미합니다.

      import React from 'react'
      import ReactDOM from 'react-dom'
      
      function hellowWorldButton() {
      	const [isClick, setClickState] = React.useState(false)
      	console.log(isClick) //false		
      
      	setClickState(true)
      	console.log(isClick) //true	
      
      	return React.createElement('button',
      		{ onClick:() => {}},
      		"Hello World!"
      	)
      }

    • 컴포넌트 활용

      import React from 'react'
      import ReactDOM from 'react-dom'
      
      function hellowWorldButton() {
      	const [isClick, setClickState] = React.useState(false)
      	const text= isClick ? "Bye World!" : "Hello World!"
      
      	return React.createElement('button',
      		{ onClick:() => setClickState(!isClick)},
      		text
      	)
      }

• JSX 문법

  import React from 'react'
  import ReactDOM from 'react-dom'
  
  function hellowWorldButton() {
  	const [isClick, setClickState] = React.useState(false)
  	const text= isClick ? "Bye World!" : "Hello World!"
  
  	return (
  		<button onClick={() => setClickState(!isClick)}>
  			<div>
  				<span> Hello Wolrd! </span>
  			<div>
  		</button>
  	)
  }

• Babel & JSX
  • Babel은 자바스크립트 신형 문법을 과거 문법으로 변형시켜 줍니다.
• Webpack.js
  • 모듈 번들러
  • entry path를 기준으로 서비스에서 필요한 참조한 모든 것을 수집합니다.
    • 이를 통해 서비스를 빌드합니다.
  • create-react-app

    npx create-react-app 파일이름
    cd 파일이름
    npm start

  • build를 통한 압축

    npm run build // 파일 압축
    npx serve -s build // 서버를 생성하고 해당 파일 이름을 루트 파일로 지정함

  • eject
    • 방출, 환경설정 데이터를 방출합니다.
    • 그리고 환경설정을 사용자가 임의로 설정합니다.
      • config와 script가 밖에 나와있는 경우에는 직접 모두 커스터마이징을 해야합니다.
      • webpack.config.js
• className
  • class는 자바스크립트 내에서 예약어이기 때문에 이를 이용할 수 없습니다.
  • 따라서 JSX 상에서는 className이라는 단어를 이용하여 class를 표현하게 됩니다.

React 컴포넌트

• 컴포넌트를 함수로 생성하고 import 하는 경우에는 반드시 Pascal Case를 사용해야 합니다.
  • 그렇지 않으면, error가 발생하여 렌더링이 되지 않습니다.

Props

• app.js와 같은 상위 컴포넌트에서 attribute를 설정하고 값을 할당하게 되면, 하위 컴포넌트에 해당 attribute에 대한 값을 이용하게 만들 수 있습니다.
• 이를 Props라고 하며, 다음과 같이 사용할 수 있습니다.

// app.js

return(
	<div className = "App">
		<MainHeader text = "Hello World!"> </MainHearder>
	</div>
)

// MainHeader.js

function MainHeader({text}){
	return <h1>{text}</h1>
}

• 기본 문법

  // MainHeader.js
  
  function MainHeader({props}){
  	return <h1>{props.text}</h1>
  }

  • 하지만 기본 문법처럼 사용하려면 해당 props에 어떠한 요소가 들어가있는지 파악해야하기 때문에 비구조화 할당 혹은 필요한 프로퍼티들을 나열하여 이용합니다.
• props는 부모 요소에서 자손 요소에 데이터를 쏴주는 형태입니다.
  • 따라서 props 데이터를 지니는 부분은 수동적이며 부모의 데이터에 의존합니다.
  • 이와 달리 state를 지니는 구조는 각각 독립적으로 실행됩니다.
• map을 이용한 props 활용

  function App() {
  	const array1 = ['apple', 'banana', 'orange']
  	return {
  		<div className = "App">
  			<ul>
  				{array1.map((value, index) => {
  					return (
  						<CustomList text ={ ${index}, ${value}}></CustomList>					
  					)
  				})}
  			</ul>
  		</div>
  	}
  }

컴포넌트 스타일링

기본 스타일링 적용 방법

• app.js 내에서 import ‘./App.css’를 하여 적용시킵니다.

sass를 이용한 스타일링 적용 방법

npm install node-sass

해당 태그의 자식에게 적용시키는 방법

& > span {
	display : flex;
}

Styled Component

npm i styled-components

import styled from styled-components

함수형 컴포넌트 vs 클래스형 컴포넌트

• 과거에는 클래스형 컴포넌트를 사용하였습니다.
• hooks

function component (props){
	return <h1>props.text</h1>
}

조건부 렌더링

function App() {
	const [text, setText] = useState("Hello")
	const buttonClick = () => {
		text === "Hello" ? setText("World") : setText("Hello")
	}

	const conditionRendering = text === "World" ? (
		<MainHeader text = "World"> </MainHeader>
	) : (
		<MainHeader text = "Hello"> </MainHeader>
	)
	
	return (
		<div className = "App">
		<h1>조건부 렌더링</h1>
		(conditionRendering)
		<button onClick = buttonClick>{text}</button>
	)
}

input 상태 관리와 useRef

• useRef를 이용하여, 특정 HTML 요소에 접근할 수 있습니다.
• 접근하고자 하는 요소에 ref 값을 할당하고,
  • 해당 ref에 대한 useRef를 만들어 연결해줍니다.

function App() {
	const [name, setName] = useState({
		first : 'Hyeseong',
		last : "Oh"
	})
	
	const firstNameRef = useRef() // reference로 HTML 레퍼런스를 참조한다.
	const lastNameRef = useRef()

	const {first, last} = name // 비구조화 할당

	const confirm = () => {
		 setName({
			first : firstNameRef.current.value,
			last : lastNameRef.current.value
		})
	}

	const addItem = (e) => {
		const inputText = e.target.value
		setText(inputText)
	}

	const onChange = () => {
	
	}	

	return (
		<div className = "App">
			<h1> {last} {first} </h1>
			<input name = "성" placeholder="성" ref={lastNameRef}> </input>
			<input name = "이름" placeholder="이름" ref={firstNameRef}> </input>
			<button onClick = {confirm}>확인</button>
		</div>
	)
}