리액트에대해 공부를 시작해보려고 합니다 .
리액트는 기본적으로 DOM을 관리하기 위해서 만들어졌습니다 .
프로젝트가 커지면 javascipt코드에서 잡는 DOM 의 갯수도 많아질 것이고 , 그렇다면 코드는 점점 난잡해지고 복잡해질것이기 때문에 ,
이러한 단점을 보완하기 위해서 react가 생겨났습니다 .
react에선 Virtual DOM (가상 돔) 을 이용하여 ,
상태가 업데이트되면 실제 돔과 가상 돔을 비교해 바뀐부분만 바로바로 실제 돔에 패치를 해주는 방식으로 운용이 되어 ,
웹개발에서 정말 중요한 부분인 퍼포먼스를 뛰어나게 해주고 , 개발 과정에 있어서도 vanila js 보다 훨씬 더 간결한 코드를 운용할수 있게 해줍니다 .
JSX
JSX 는 리액트에서 생김새를 정의할대 사용하는 문법입니다 .
HTML같이 생겼지만 babel이 HTML로 변환을 해줍니다 .
JSX syntax
태그는 꼭 닫혀있어야합니다 .
두개 이상의 태그는 무조건 하나의 태그로 감싸져있어야 합니다 .
ex)
import react from "React"
function App() {
return (
<React.fragment>
<p> hello </p>
<h1> World </h2>
</React.fragment>
)
}
JSX 내부에서 javascript 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여줍니다 .
JSX 태그에 style 을 주려면 JSS 문법을 따라야합니다 .
- 를 없애고 camel-Case 로 대체합니다.
background-color : backgroundColor
class 는 className 으로 대체되어 사용됩니다 .
prop
컴포넌트에서 다른 컴포넌트로 prop이라고 하는 객체를 보낼수 있습니다 .
객체기때문에 prop. 으로 접근이 가능하고 바로 destructuring을 해서 사용해도 무방합니다 .
props.children
컴포넌트 태그 사이에 넣은 값을 조회하고 싶을땐 . props.children 을 조회하면 됩니다 .
React Hooks .
useState
값이 동적으로 바뀌는 부분에 useState 값을 설정해 사용합니다 . 사실 이 useState, useEffect가 React의 존재 이유라고 생각합니다 .
이 막강한 리액트 훅은 개발하는데에 있어서 정말 편하게 해줍니다 .
JSX 와 리액트 훅이 버무러저 바닐라자바스크립트로 짤때와는 비교도 되지않게 편리합니다 .
간단한 카운터 예제로 한번 useState의 쓰임을 보자면 ,
import react ,{useState} from 'React'
function App() {
const [number , setNumber ] = useState(0)
const increaseNum = () => {
setNumber(number + 1 )
}
const decreaseNum = () => {
setNumber(number - 1 )
}
return (
<>
<p>{number}</p>
<button onClick={increaseNum}>increase</button>
<button onClick={decreaseNum}>decrease</button>
</>
)
}
babel
바벨은 자바스크립트의 문법을 확장해주는 도구입니다.
아직 지원되지않는 최신 문법이나 , 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로써
구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 합니다 .
input 상태 관리하기
기본적으로 input 을 사용한다는것은 value를 받아서 처리할 일이 있기때문에 input 을 사용합니다 .
따라서 해당 input 에 value 값을 주어야 하는데 보통 state로 처리합니다.
const [ name , setName ] = useState('')
<input value={name} onChange={(e) => setName(e.target.value)} />
그렇다면 여러개의 input을 처리해야 할 때에는 어떻게 해야할까요 ?
그것은 state를 오브젝트로 만들어 처리해야하는 input마다 각 value 를 생성해주고 , 키를 동적으로 바꿔서 value를 설정할수 있습니다 .
const [ inputs , setInputs ] = useState({ name: '' , nickName: '' })
const { name , nickName } = inputs // destructuring
const handleChange = () => {
const { value , name } = e.target;
setInputs( {... inputs , [name] : value } )
}
<input value={name} onChange={handleChange} name='name'/>
<input value={nickName} onChange={handleChange} name='nickName'/>
중요한점 !!! name을 무조건 설정해주어야합니다 .
그리고 혹시 form을 사용하는 컴포넌트라면 , form안에있는 버튼을 눌렀을때 새로 고침이 되기 때문에 그것을 방지하기 위해서
<form onSubmit={(e) => e.preventDefault)}
<button type='submit' >submit</button>
</form>
이렇게 해야 합니다 .
웹 앱의 기본적인 동작방식
클라이언트는 계속하여 서버와 통신합니다 .
1. 최초 요청 (request)
2. 최초 응답 (Response)
3. 추가 요청
4. 추가응답
통신 프로토콜(Communication Protocol , 통신규약)
컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고받는 양식 및 규칙의 체계를 의미합니다 .
대표적으로 HTTP , HTTPS , FTP , SSL 등이 있습니다 .
특수 문자 용어
백틱 , 그레이브 ``
틸드 , 물결표시 ~
엑스클러메이션 , 느낌표 !
앳, 골뱅이 @
샵, 넘버사인 , 우물 정 #
달러 $
퍼센트 %
캐럿 ^
엠퍼센드 &
에스터리크스 , 별표시 *
하이픈, 대시, 마이너스 -
언더스코어 , 로대시 , 밑줄 _
이퀄, 동등 =
쿼테이션 , 큰따옴표 "
어포스트로피 , 작은따옴표 '
콜론 :
세미콜론 ;
콤마 , 쉼표 ,
피리어드 , 닷 , 점 ,마침표 .
슬래시 /
버티컬 바 |
백슬래시 , 역슬래시 \
퍼렌서시스 . 소괄호 , 괄호 ()
브레이스 , 중괄호 {}
브래킷, 대괄호 []
앵클 브래킷 ,꺽쇠 괄호 <>
오픈소스 라이센스
오픈소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것.
OpenSource.org