MINIBEEF/REACT (8) 썸네일형 리스트형 #7 React 졸업하기(A to Z) 0. React 짱짱맨 React는 페이스북(facebook)에서 제공하는 프런트엔드 라이브러리이다. JSX가 기본이 되며, 컴포넌트 기반의 개발을 도와준다. 사실 React가 없 더라도 우리는 HTML, CSS, JS등 이미 잘 알려진 도구를 활용해 웹페이지를 만들 수 있다. 하지만 사람들이 왜 그토록 React에 열광하는 것일까? 그 이유는 React의 특징과 이것이 없을 때와 있을 때 편의성을 비교해보면 쉽게 알아차릴 수 있다. React는 앞서 말했듯이 컴포넌트라는 것을 이용해 UI를 만들어 나간다. UI가 큰 덩어리 라고 가정하면, 컴포넌트는 이 큰 덩어리를 이루고 있는 작은 덩어리들이라고 생각하면 쉬울 것 같다. 즉, 우리가 웹 사이트를 볼 때 만약 그것이 React로 짜여있다면 내비게이션 바.. #6 Create 구현(~form) (필기) 모든 웹 어플리케이션은 CRUD에 의존한다. Create를 알아보자. mode를 바꾸는 방식으로 갈꺼임 URL에 /create를 붙이는 식이다. 컴포넌트를 만들고 onchangemode 핸들러를 만들고 라우팅된 각각의 링크들을 클릭했을 때 mode가 바뀌게 한다. /create에서는 props.onchangemode를 넣어서 명시한다. onChangeMode라는 이벤트는 mode(현재 상태)를 인자로 받는다. 이렇게 해서 mode가 바뀌게 된다. form은 정보를 전송하는 녀석이다. html과 똑같다. create 컴포넌트에 form을 넣고 기존에 하던 방식으로 input-submit 방식을 취하면 된다. 이 때 onSubmit 이벤트를 써서 submit이 눌렸을 때 기능을 구현한다. onsub.. #5 Event (필기) 기본적으로 state와 props의 변경은 render()의 호출을 일으킨다. 가장 기본적인 형태의 이벤트(상황에 따라 정적으로 컴포넌트를 render)는 메인 컴포넌트 상단의 조건문에 mode에 따른 분기(ex : welcome, read)를 만들고 매 액션마다 props(혹은 state)를 수동으로 바꾸는 것이다. 이와같은 방식은 매우 원시적이며 우리가 하고자 하는 Event 와는 거리가 멀다. 그렇다면 이를 사용자 액션에 따라 동적으로 만들고자 한다면 어떻게 해야할까? -> JavaScript preventDefault onclick의 경우 우리가 알고있는 JS형태로 사용하면 안된다. React Application은 JSX를 기반으로 하기 때문이다. JSX에서 onclick은 c를 대문자.. #4 props와 state props? props란 리액트 컴포넌트의 속성을 정의하는 개념이다. 컴포넌트 내부에 마치 python의 format 문법처럼 {name}과 같이 명시하고, App 컴포넌트에서 props를 지정하여 속성 값을 변경할 수 있다. HTML 태그의 Attribute와 같은 개념이라고 보면 쉽다. state state는 props와 비슷하지만, 데이터를 은닉하고 싶을 때 사용한다. props로 컴포넌트의 속성을 정의할 경우 클라이언트에서 이를 쉽게 변조하거나 열람할 수 있다. 해당 컴포넌트가 단순히 사용자에게 보여지는 용도라면 상관이 없지만, Database나 다른 중요한 데이터에 대한 핸들링이라면 이를 데이터 은닉화할 필요가 있다. 때문에 리액트에서는 state라는 개념을 도입하여 클라이언트가 볼 수 없는 A.. #3 앱 빌드 앱을 빌드하는 방법은 매우 간단하다. 일단 개발을 최종적으로 마치고 npm start를 이용해 디버깅을 진행한다. 최종적으로 배포할 준비가 끝났다고 생각이 들면 build 명령을 통해 앱을 빌드할 것이다. npm run build build 명령을 사용하면 개발 환경으로 잡은 폴더에 build가 생긴다. 리액트는 DOM을 렌더링하는데 초점이 맞춰진 라이브러리이기 때문에 사용자에게 서비스를 제공할 때 무거운 소스코드를 제공해서는 안된다(개발자가 작성하는 소스와 실제 클라이언트가 보게될 화면의 용량 차이가 큼) 때문에 우리는 개발을 마쳤을 때 build 함으로써 필요없는 리소스들(띄어쓰기 등)을 최소한으로 줄이고 사용자에게 배포될 준비가 되게된다. npm install serve && npx serve -s.. #2 리액트 앱의 기본 구조 create-react-app을 이용하여 개발 환경을 세팅했다면 리액트 애플리케이션의 가장 기본적인 구조를 살펴볼 수 있다. 처음 만들었다면 node_modules, public, src 폴더가 있을 것이고 빌드를 한번이라도 했다면 build 폴더도 있을 것이다. node_modules node.js 모듈이 들어있다. 정확히는 모르겠지만 react를 설계할 때 node.js를 어느정도 베이스를 두고 만든 것 같다. 참고로 react는 javascript 라이브러리이다. 아직 초보자 단계에서는 건들 것이 없으며, 개발에 그닥 큰 영향을 끼치는 것도 아니니 그냥 넘어가자. public public 디렉토리를 살펴보면 여러가지 잡다한 것들이 많이 들어있지만 이 중 가장 중요한 것은 index.html 이다. .. #1 개발환경 세팅 Node.js 다운로드 리액트는 npm이라는 node.js 기반의 패키지 관리 소프트웨어를 통해 다운로드 받을 수 있다. 공식 홈페이지로 들어가면 좌측은 안정화 된 버전(LTS), 우측은 최신 버전인데 안정화된 버전을 다운 받는 것을 추천한다. npm install create-react-app npm은 리액트 개발 환경을 바로 구축할 수 있도록 create-react-app을 제공한다. npm install 명령을 통해 다운로드 받을 수 있다. 이 때 별개로 npx라는 패키지 관리자도 있는데, 이는 실행시킬 때만 다운로드한 후 종료시 삭제한다. 패키지의 버전을 항상 최신으로 유지할 수 있으며 스토리지를 상당히 적게 먹기 때문에 실무에서 사용하는 것을 추천한다. create-react-app 다운로드가 .. #0 필기 이전 1 다음
