일렉치는 취준생

리뷰 작성하기 페이지를 만들어야하는데 . . 뇌에 지진이 났다. 우리 페이지의 특징은 나머지 부분은 고정된채로, 오른쪽 content-box 내용만 바뀌는게 특징인데특정 상태에 따라 content-box 내용을 다르게 해야한다는 걸 생각을 못하고 무식하게 페이지를 만든 것이다..디자인 상 이렇게 내용물이 바뀌게 코드를 짰어야 했는데,현재 content-box의 코드는 이상태였다.import React, {useState} from 'react';import SearchBar from '../utils/SearchBar';import ReadBooksTab from './ReadBooksTab';import ReviewsTab from './ReviewsTab';import WishlistTab from ..

현재 회원가입 페이지 상태input에 입력한 데이터를 작성완료 버튼을 눌렀을 때 확인할 수 있도록 해놨다.이제 가장 중요한 기능 연결을 할 차례기존코드import React, {useState} from 'react';import '../styles/auth/SignupPage.scss';import InputField from '../components/utils/InputField';import Button from '../components/utils/Button';import {useNavigate} from 'react-router-dom';function SignupPage() { const [email, setEmail] = useState(''); const [password, setP..

앞에 일차들은 VScode 설치와 같은 간단한 수업이여서 스킵했습니다 ! 클래스형 컴포넌트의 경우 JavaScript의 클래스 개념을 이용한다. React.Component를 상속받는 클래스형 컴포넌트 예시 코드 import React from "react"; class App extends React.Component { render() { return Hello; } } export default App; 클래스형 컴포넌트를 사용할 때는 반드시 render 함수가 정의되어야 한다. render는 반드시 JSX를 return하는 부분을 포함하고 있어야 한다. 함수형 컴포넌트는 function 키워드와 함수명, JSX를 return하는 부분으로 구성되어 있다. function App() { return ..

JSX: 리액트의 강력한 확장 문법 리액트에서 컴포넌트를 작성할 때 우리는 JSX라는 특별한 문법을 사용한다. JSX는 자바스크립트의 확장 문법으로, HTML 태그처럼 생겼지만 실제로는 자바스크립트이다. 이것은 리액트가 제공하는 컴포넌트를 편리하게 작성하고 사용할 수 있도록 돕는 독자적인 문법이다. JSX의 특징 1. HTML과 자바스크립트의 결합 JSX는 자바스크립트의 확장 문법으로, 자바스크립트 코드 안에서 HTML 태그를 사용할 수 있게 해준다. 2. Babel을 통한 컴파일 리액트 애플리케이션은 JSX 코드를 브라우저가 이해할 수 있는 일반적인 자바스크립트 코드로 변환해야 한다. 이때 Babel이라는 도구를 사용하여 JSX를 자바스크립트로 컴파일한다. 3. 태그의 닫힘 HTML과 마찬가지로 JSX..

컴포넌트란 무엇인가? 컴포넌트는 요소라는 뜻으로, 여러 요소들을 합쳐서 전체 요소를 만들 수 있다. 리액트가 컴포넌트를 사용하는 방법 ? 여러 컴포넌트들이 모여서 오브젝트를 구성하고, 전체 페이지를 만든다. 컴포넌트는 자바스크립트의 함수형으로, props를 입력받아 JSX를 리턴한다. 이러한 함수형 컴포넌트들을 모아 전체 리액트 앱을 구성한다 컴포넌트의 장점 ? 1. 가독성 : 각 컴포넌트는 명확한 기능을 수행하여 가독성을 높여준다. 2. 재사용성 : 컴포넌트는 특정 기능을 재사용함으로써 생산성과 재사용성을 향상시킨다. 3. 유지보수 : 모듈화된 구조는 코드 수정 및 업데이트를 간편하게 만들어 유지보수를 좋게한다. 이러한 장점들은 효과적인 개발과 유연한 유지보수를 가능하게 한다 ! 컴포넌트를 잘 사용해서..

리액트는 왜 탄생했을까? -> DOM을 체계적이고 직관적으로 바꾸기 위해 탄생했다. 여기서 DOM이란 ? -> 문서 객체 모델(Document Object Model)의 약자 페이지를 나타내는 트리구조 웹 페이지의 구조화된 표현을 프로그래밍 언어가 이해할 수 있는 객체로 변환는 인터페이스를 제공한다. 클라이언트인 인터넷 브라우저가 서버로 요청을 보내면 서버는 데이터라는 응답을 보내준다. 응답의 종류 중 HTML은 데이터를 구조적, 계층적으로 나타낸다. 이것을 트리 구조로 바꾸어서 컴퓨터에 저장하는 것이 DOM이다. 렌더링 : 저장된 후에 DOM이 실제 화면에 그려지는 것 리액트가 하는 일은 DOM을 어떻게 조작할지 도와주는 것이다. JavaScript는 DOM을 조작해서 화면을 나타내는데, 웹이 발전하면..