웹개발/React
-
Week02 리액트/Next.js 기초 3.5 React Hooks (1) - 상태 훅웹개발/React 2023. 12. 31. 16:39
React Hooks는 훅(Hook)을 통해 함수 컴포넌트 안의 상태나 라이프 사이클을 다루기 위한 기능이다. 잘 와닿지 않는데 HTML과 Vanila JS를 사용 할 줄 안다는 가정하에 훅이 무슨 역할인지 이해해보자. 유저가 input을 입력하고 submit버튼을 누르면 유저의 입력값이 나타나는 코드를 작성한다고 가정해보자. Java script 파일에 작성해야 할 점을 생각해본다면 3가지로 추릴 수 있다. 1. submit버튼 클릭시 input에 들어와 있는 값을 가져와야한다. 2. submit버튼에 클릭 시 어떤 행동을 하라는 (이 경우에는 input값을 가져와 입력값을 출력하는) 이벤트 리스너를 달아야 한다. 3. input값에 들어가 있던 값을 어느 엘리먼트에서 프린트 할 것인지 가져와야 한다...
-
Week01 리액트/Next.js 기초 3.1-3.4웹개발/React 2023. 12. 31. 16:26
3.1 리액트 입문 터미널에서 아래의 코드를 실행해 타입스크립트를 사용하는 최신 리액트 기본 앱을 만들 수 있다. $ npx create-react-app@latest react-sample --template typescript npx가 없다면 npm을 이용해 설치해 주고 npm이 없다면 node js를 설치해줘야 한다. $ cd react-sample $ npm run start 만들어진 react-sample 프로젝트로 작업 디렉토리 변경 후 서버를 실행해 준다. 서버가 실행될 때 동작하는 코드에 대해 자세히 알아보자. 사전지식) tsx, jsx는 return 값으로 html의 element를 준다. 그리고 return element를 export한다. const Hello = () => { ret..
-
React study 시작웹개발/React 2023. 12. 31. 15:45
Vue2.0->3.0에서 바뀌는 점이 많아지면서 기존의 vue 2.0으로 개발해 왔던 프로젝트를 React로 뒤엎기로 결정했다. react로 알음알음 찾아가며 바꿔가고 있지만, 기본적인 개념에 대해 더 확실히 짚고넘어가자는 의미로 파트내에서 스터디를 만들어 진행하기로 했다. 진행하면서 배운점들을 정리할 예정이다. 교재 : 타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발 강의 : Udemy - React 완벽 가이드 with Redux, Next.js, TypeScript