2023.04.08 - [Front end/React] - 클래스 컴포넌트의 형태와 리액트 데브툴즈 클래스 컴포넌트의 형태와 비교해보세요. 클래스 컴포넌트의 형태와 리액트 데브툴즈 클래스 컴포넌트 설명 render의 return 부분 화면을 그리는 부분이다. 실제로 보면 Like 버튼아니면 'You liked this.'라는 텍스트가 화면에 보인다. 즉, return 부분에 있는게 화면에 나오는것이다. 그러니 dongwookit.tistory.com function 컴포넌트는 class 컴포넌트와 다르게 render 라는 메서드가 없기 때문에 그냥 return 으로 화면을 그려주면 된다. 둘 다 뭔 짓을 하든 return 한 것이 화면이다. 클래스컴포넌트의 this.state와 대응 하는 useState..
클래스 컴포넌트 설명 render의 return 부분 화면을 그리는 부분이다. 실제로 보면 Like 버튼아니면 'You liked this.'라는 텍스트가 화면에 보인다. 즉, return 부분에 있는게 화면에 나오는것이다. 그러니까 우리는 화면에 나올 모든것들을 return 에다가 적어주면 되고, 위 코드처럼 조건에 따라 화면을 보여주고 싶다면 if문과 같이 써서 화면에 나올 태그들을 싹 다 적어주면 된다. html이지만 컨트롤을 자바스크립트가 하는셈이다. 그리고 리액트는 데이터를 중심으로 생각해야한다. 즉, 화면에서 달라질 부분을 state로 만들어야 한다. 위 코드를 실행시키서 화면에서 달라지는 부분을 확인해보면 버튼이 텍스트로 바뀔것이다. 그래서 UI(버튼과 텍스트)를 나타내는 상태를 liked ..
▼ 바벨 추가하는 코드 ▼ JSX 사용하는 곳은 타입도 바꿔줘야한다. 바벨 (React.createElement -> JSX ) 자바스크립트 파일에 과 같이 태그를 쓰는 문법이 가능할까? 당연히 안된다. 자바스크립트에는 저런 태그 쓰는 문법이 존재하지 않는다. 그런데 어떻게 리액트에서는 저런식으로 코딩을 할 수 있을까? 바로 바벨이라는 라이브러리 때문이다. 바벨이라는 라이브러리가 JSX 코드를 보면 우리 몰래 React.createElement로 바꿔준다. 즉, 바벨을 설치해야 JSX를 사용할 수 있는것이다. React17버전, React18버전 아직 회사에서 리액트 17버전도 많이 쓰인다. 그래서 회사에 들어가면 위 코드를 가장 먼저 확인해야한다. JSX 주의할 점 우리가 리턴부분에 작성하는 html ..
// 여기다가 LikeButton을 그린다. ▲ React 18버전 불러오는거임 ▲ ReactDOM 18버전 불러오는거임 ▼ 아래 두줄은 배포용 리액트에 대한 입문자들의 착각 결국 웹 브라우저는 html, css, JavaScript 밖에 못읽는다. 특히 화면을 구성하는것은 html,css 여야하고 이에 대한 동작은 JavaScript 여야한다. 여기서 리액트 라는게 새로운 존재가 아니고 리액트도 결국은 자바스크립트일뿐이다. 자바스크립트로 html,css를 만들어낼 존재일뿐이다. 그래서 우리는 리액트로 프로그래밍을 하더라도 결과물은 html,css,JavaScript가 나와야지만 브라우저가 파일들을 읽고 화면을 표시해줄수 있다. 리액트로 개발하는 방식은 크게 2가지 1. Class 방식 - 99% 거의 ..
state에 담긴 데이터가 array, object 데이터일 경우 state 수정할 때 약간 귀찮은 점을 알아보자. 버튼을 눌렀을때 state에 담긴 array 자료 중 첫번째 데이터 '자바스크립트의 역사' -> '자바스크립트의 this' 로 변경하고 싶다. function App(){ let [title, setTitle] = useState( ['자바스크립트의 역사', '리액트 useState', '프로그래밍 공부방법'] ); return ( { title[0] = '자바스크립트의 this'; setTitle(title) }}> 수정버튼 ) } 이래도 된다. (제대로 동작은 안됨) array 자료안의 X번째 항목을 변경하고 싶으면 array자료[X] = '바꿀값' 이렇게 하면 된다. 그래서 자료를 바..
좋아요 버튼 만들기 버튼을 누르면 좋아요 개수가 1씩 증가하는 기능을 만들어보자. 자주 바뀔 것 같은 html 내용은 state로 저장했다가 데인터바인딩하면 된다. 좋아요 개수를 state로 만들면 될 것이다. function App(){ let [title, setTitle] = useState( ['자바스크립트 동작원리', '리액트를 쓰는 이유', '프로그래밍 공부법'] ); let [like] = useState(0); return ( { title[0] } 👍{like} ) } onClick 사용법 이제 버튼을 누르면 like라는 state를 1 증가시키면 원하던 기능 완성인데 그 전에 알아야할게 하나 있다. 어떤 html을 클릭시 원하는 코드 실행하는 법을 알아보자. 일반 html 파일에서는 이..
화면에서 자주 바뀔것 같은 부분은 state에 담는다. state 만드는 법 리액트에서는 변수 말고 state를 만들어서 데이터를 저장해둘 수 있다. 이번에 state를 이용해 데이터를 잠깐 저장해보도록 하자. import { useState } from 'react'; import './App.css' function App(){ let [title,setTitle] = useState('리액트 useState hook'); let posts = '리액트 JSX 문법'; return ( 동욱의 블로그 {title} 2월 17일 발행 ) } 맨 윗줄에 import {useState} from 'react' 하고 원하는 곳에서 useState('보관할 데이터') 쓰면 state에 데이터를 잠깐 저장할 수 ..
리액트에서는 html 대신 JSX라는 걸 써서 웹 페이지를 만들어나간다. JSX 문법 1. html에 class 넣을 땐 className (App.js) function App(){ return ( 동욱의 블로그 ) } App.js 파일에 html 코드와 비슷한 코드는 html이 아니라 JSX이다. 원래 리액트 환경에서 하나 만들고 싶으면 자바스크립트로 React.createElement('div',null) 이런 식으로 어렵게 코드를 짜야한다. 근데 이러면 리액트를 사용하는 유저들이 다 도망갈것이다. ㅋㅋ😭 그래서 리액트 개발자들은 JSX라는 언어를 대신 사용하게 해주었다. JSX는 html과 사용방식은 비슷하다. 근데 JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 ..
📌 React, Vue, Angular, Svelte의 공통적인 목적 웹에서 웹 페이지가 아닌 SPA(Single Page Application)를 만든다. 📌 웹 페이지 웹 페이지라 하면 네이버, 다음을 생각하면 된다. 각각의 페이지들이 명확하게 나누어져있는 사이트들이다. 📌 SPA (Single Page Application) SPA는 웹에서 모바일 앱처럼 앱 같은느낌이 나는 사이트들이다. SPA는 실제로 기존의 웹 페이지보다 더 많은 기능을 제공한다. 그래서 복잡하고 어려워졌다. 이게 프론트엔드 개발자가 나온 이유이기도 하다. SPA의 예시로 Gmail, 웹 액셀,웹 파워포인트,웹 워드들을 생각하면 좋다. 실제로 Gmail을 사용하면 웹 사이트가 아니라 하나의 애플리케이션같은 느낌을 받을것이다. 웹..
