본문 바로가기

🌌 | WEB DEV/React22

[React] 2-1. array state 정렬하기 ( .sort()활용) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) array state를 정렬하고 싶을 때는 어떻게 해야할까? 가장 보편적인 방법인 sort()메서드를 이용해보자. 1. sort() 활용하여 array state 정렬하기 let [music, setMusic] = useState( [{"type": "Rock", "title": "Summer", "singer": "The Volun.. 2023. 5. 27.

[React] 2. state (변수, array, object) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 1. state React의 JSX를 이용하여 템플릿을 작성할 때 중요한 자료들을 잠시 저장해야할 때가 있다. 자료 저장 방법_1) 변수를 이용한다. let, const 등을 활용한다. functoin App(){ let name = "Kassid" return ( ... ); } 자료 저장 방법_2) state를 이용한다. 변수 외에도 state를 활용하여 자료를 저장할 수 있다. 먼저 useState를 import한다. import { useState } fro.. 2023. 5. 26.

[React] 1. JSX 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 본격적으로 React를 이용해 웹페이지를 만들어보자! 1. JSX 웹사이트의 뼈대를 구축할 때 html과 css를 이용하여 구성한다. React라고 해서 다를 것은 없다! 똑같이 html과 css를 이용한다. 하지만 다른 점은 저번 포스트에서 다뤘던 것 처럼 js파일에 코드를 작성한다. 이것이 바로 JSX이다. JSX(JavaScript XML)는 JS에 XML을 추가한 문법이다. JSX에 XML 코드를 입력하면 브라우저에서 실행하기 전 바벨을 통해 일반 js형태의 코드로 변환된다. App.js import './App.css'; function App() { return ( ..... 2023. 5. 7.

[React] 0. React를 사용하는 이유 & 초기 세팅 현재 웹 프레임워크 중 가장 많이 사용하고 시장에서 원하는 React에 대해서 알아보자! 1. React를 사용하는 이유 장점 1_ 리액트는 SPA(Single Page Application)를 만들 수 있다. 즉, 모바일 어플처럼 새로고침을 하지 않고 페이지 전환 등이 부드럽게 구현이 되도록 제작할 수 있다. 물론 Vanilla JS로도 SPA를 구현할 수 있지만 React를 이용하는 쪽이 훨씬 간편하게 만들 수 있다. 장점 2_ Html의 재사용이 편리해진다. html을 함수, array, object 등에 담아서 활용할 수 있기 때문에 재사용이 편리하다. 장점 3_React Native를 이용해 모바일 어플 구현도 가능하다. 이러한 장점들 뿐아니라 시장이 가장 요구하는 기술이기 때문에 웹 개발자로서.. 2023. 5. 5.

이전 1 2 3 다음

티스토리툴바