본문 바로가기

Zoo48

가상요소 선택자 ::before, ::after 가상 요소란 선택자 (Pseudo-elements) 선택자에 추가하는 키워드로, 선택한 요소(element)의 일부에만 스타일을 적용한다. 즉, 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용합니다. 다시 말해, HTML에 새로운 요소(element)를 추가한 것처럼 동작합니다. 그 중 가장 대표적인 ::before 와 ::after 의 사용 예시에 대해서 알아보자 가상 요소 사용법 가상 요소는, ::before, ::after, ::first-letter 와 같이 앞에 '::'를 붙여서 표기합니다. import React from "react"; import './App.css'; function App() { return ( Hello Hello ); } export.. 2022. 12. 10.

클래스형 컴포넌트와 함수형 컴포넌트의 차이 📑 클래스형 컴포넌트와 함수형 컴포넌트 물론 클래스형 컴포넌트와 함수형 컴포넌트는 하는 일은 동일하지만, 코드 구조에서 약간의 차이가 있으며 클래스 컴포넌트는 라이프 사이클 기능과 state 관리 기능이 코드에 구현되며, 함수형 컴포넌트는 hook 을 통해 라이프 사이클 기능과 state 관리 기능 코드를 짤 수 있다. 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다. 과거, 함수형 컴포넌트는 state 와 라이프 사이클 API 를 사용할 수 없다는 단점이 있었지만 현재, 훅에 의해 이 모든 문제가 해결되었다. // 클래스형 컴포넌트 class App extends Component { state = { count: 0 } increase = ().. 2022. 12. 9.

React를 사용하는 이유 🙋🏻‍♂️프론트엔드 라이브러리 등장 배경 프론트앤드 라이브러리가 등장하게 된 이유는 동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함이다. 정적 웹 페이지 웹 서버에 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지. 단순히 정보를 전달하기 위한 목적이기 때문에 로그인을 한다거나 뭔가 정보를 보낸다거나 하는 상호작용은 중요하지 않은 요소로 볼 수 있다. 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 된다. 이런 경우엔 단순히 HTML과 CSS의 구성만으로도 웹 페이지를 만들 수 있다. Ex) 홈페이지에 회사소개, 음식메뉴, 포트폴리오 등 내용이 변하지 않고 고정적인 페이지. 동적 웹 페이지 요청 정보를 처리한 후에 제작된 HTML .. 2022. 12. 9.

Redux(리덕스)란? Redux(리덕스)란? 리덕스란 자바스크립트 상태관리 라이브러리이다. 우선 리덕스는 리액트 내부에 있는 기술이 아니며 순수 HTML, JAVASCRIPT 내에서도 사용이 가능하다. 컴포넌트에 집중된 리액트와 시너지가 좋으니 대체적으로 리액트에 리덕스를 사용할 뿐이다. Redux의 기본 개념 : 세 가지 원칙 Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다. Changes are made with pure functions 변경은 순수함수로만 .. 2022. 12. 8.

이전 1 2 3 4 5 6 7 8 ··· 12 다음

티스토리툴바