전체 글 (47) 썸네일형 리스트형 #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 ··· 6 7 8 9 10 11 12 ··· 16 다음
