본문 바로가기

react7

[React] 리액트 앱 만들기 (create react app) node js 설치 먼저, node js 설치가 필요함 콘솔 창에 node -v 를 입력해서 설치 여부를 확인할 수 있음 npx 를 입력해서 작동이 되는 지 확인 create-react-app npm create-react-app 앱 이릅 혹시 아래와 같은 에러가 뜬다면, You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support global installation of Create React App. - npm uninstall -g create-react-app - yarn global remove create-react-app 둘 중 하나를 입력해서 제거한 후 다시 해.. 2022. 7. 1.

[React] State와 Props 리액트의 State 리액트의 장점은 UI 내에서 데이터가 변경된 부분만 업데이트 해준다는 것이다. 리액트에 데이터를 저장시켜서 자동으로 리렌더링을 시킬 수 있다. state는 app 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체로, 컴포넌트 안에서 관리된다. 이를 통해, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜 편의성을 높일 수 있다. 동적인 데이터를 다룰 때 사용한다. 리액트로 데이터를 저장하려면 React.useState() 를 사용할 수 있으며 괄호 안에 초기값을 지정해줄 수 있다. const [] = React.useState() 저장된 데이터를 확인해보면, 배열의 형태로 저장된 것을 확인할 수 있다. [ data, modifier ] data : 저장되는 값 modifie.. 2022. 6. 30.

[React] element 만들기, JSX 리액트는 요새 많이들 쓰는 프레임워크 중 하나이다. 페이스북이 사용자 UI 구축을 위해 만든 라이브러리이며, interactive한 웹사이트를 만들게 도와준다. - 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줌 - 어플리케이션의 각 상태에 대한 간단한 뷰만 설계 - 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링함 - 선언형 뷰 : 코드를 예측 가능하고 디버그하기 쉽게 만들어줌 기술 스택의 나머지 부분에는 관여하지 않기 때문에, 기존 코드를 다시 작성하지 않고도 리액트의 기능을 이용해 개발 할 수 있다는 것 또한 장점인 것 같다. 리액트 시작하기 html 파일에 리액트를 설치하기 위한 코드를 넣어줘야 한다. 첫번째 줄은 리액트로, 어플리케이션이 interactive하도록 만들.. 2022. 6. 30.

이전 1 2 다음

티스토리툴바