javaScript 썸네일형 리스트형 [React] map()을 통한 반복적인 태그 줄이기 리액트를 접하기 시작하면 반복적으로 하드 코딩되는 부분이 발생한다 예를 들어 function App() { return ( Safari belted half shirt 6월17일 예약 발송 Flap pocket open collar shirt 6월17일 예약 발송 Aircrew half shirt 6월17일 예약 발송 Multi stripe pique tee 6월17일 예약 발송 ); } 이렇게 상품이 여러개가 존재하고 상품 한 개마다 비슷한 구조의 태그들을 가지고 있다면 State를 통해 배열안에 담거나 data로 만들어 코드를 줄이면서 효율적으로 관리할 수 있다 const [productData, setProductData] = useState([ 'Safari belted half shirt', '.. 더보기 [React] useEffect ?? useEffect란 어떠한 컴포넌트가 Mount(화면에 첫 렌더링, 시작)되었을 때 Update(재렌더링, 다시)되었을 때 Unmount(화면에서 끝날 때, 종료) 되었을 때 특정 작업을 처리해주고 싶으면 사용하면 된다 이 실습은 유튜트 별코딩님 영상을 예제로 활용한다 useEffect()는 콜백 함수를 받는다 첫 번째 방법 useEffect(() => { // 실행하고 싶은 코드 }); - 렌더링 될 때마다 실행 두 번째 방법(인자) useEffect(() => { // 실행하고 싶은 코드 }, [value]); - 화면에 첫 렌더링 될 때 실행 - value값이 바뀔 때 실행 실습을 통해 확인해본다 App.js에 버튼을 누르면 카운트수가 증가하는 코드를 작성했다 import './App.css'; i.. 더보기 [React] React State? State는 리액트에서 상태 값이다 유동적인 데이터를 주고받을 수 있는 상태 값을 말한다 class형 State가 있고 function형 State가 있다 function형 State인 useState()를 예제를 통해 알아본다 React CRA를 Load 한 App.js import './App.css'; import { useState } from 'react'; function App() { // useState(); const [state, setState] = useState(); return ( hello, react ); } export default App; function형에서 State는 useState()를 사용한다 1. useState() 사용하려면 먼저 import 해와야 한다 2.. 더보기 [React] .map() 사용 시 key값을 쓰는 이유 map()을 사용하다 보면 이러한 경고를 만나게 된다. 목록의 하위 항목에는 key가 있어야 한다??? 결국 key가 있어야 한다는 것 Key?? 1. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다 2. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다 key는 list항목을 만들 때 들어가야 하는 문자열 속성이다 어떠한 항목을 추가, 변경, 삭제 할 때 식별을 위한 것이다 map()을 사용할 때 key를 사용하는 이유 ul나 list형식을 만들었을 때 react는 list 모든 항목을 재변경하게 된다 이는 굉장히 비효율적이어서 내가 원하는 항목에 key를 식별하여 변경시키는 것이다 더보기 [React] Component? 리액트의 컴포넌트 컴포넌트는 앱을 이루는 최소한의 단위이다 props나 state를 아직 잘 모른다면 (나도 아직 모른다) Component의 사용법에 대해 알아가면 될 거 같다 컴포넌트를 통해서 UI를 재사용 가능한 개별적인 조각으로 나누고 그 조각들을 살펴 볼 수 있다 쉽게 이해 하자면 HTML을 쭉 나열하는 게 아니라 HTML을 함수에 담아 쪼개서 사용할 수 있다는 얘기다 여기서 props를 함수 인자로 받아 데이터를 받지만 일단은 props를 빼고 예제를 만들어 보았다 그전에 지금은 function형 component를 많이 사용하지만 구형 문법인 class형 component를 알고 있으면 도움이 되지 않을까 싶다 class component (rcc) class Welcome extends R.. 더보기 React ? 웹의 발전 1세대 웹 HTML을 중심으로 한 정적인 화면을 구현하는 데 그쳐 있었다 야후가 대표적인 사이트이며 온라인 방명록 같은 게 있을 수 있다 2세대 웹 웹 1.0(1세대)는 인터넷을 통해 일방적인 정보를 보여주었다면, 웹 2.0(2세대)는 사용자가 직접 콘텐츠를 생산하여 쌍방향으로 소통할 수 있다. 게시판, 댓글, 블로그, UCC, 지식백과 등이 있다 3세대 웹 우리가 HTML을 배울 때 먼저 듣게 되는 말인 시멘틱 웹 기술을 사용하고 내용을 이해하며 맞춤형 정보를 제공하는 지능형 웹 기술을 도입한 게 3세대 웹이다 읽기 쓰기를 넘은 소유라는 개념이 생기기 시작하였고 데이터를 동적으로 처리하고 사이트를 다이내믹하게 구성하는 요소들이 많이 생겨나면서 나오기 시작한 프레임워크와 라이브러리 중 하나가 .. 더보기 [JS] createElement(), appedChild(), innerHTML() createElement() JS에는 createElement()라는 게 있습니다 HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. MDN 정의이고 간단하게 알아보겠습니다 let element = document.createElement('p'); "문서에 p태그를 추가하겠다" 입니다 function test() { let p = document.createElement('p'); console.log(p); } test(); 함수에 먼저 담아 test 해보겠습니다 콘솔에 잘 들어와 있는 걸 확인할 수 있습니다 아무런 위치도 정해 주지 않고 요소를 생성만 했기 때문에 이걸 사용하려면 appedChild()가 필요합니다 ap.. 더보기 [JS] function(함수)문제 데이터 반환하기 문제) getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환 값을 더해서 리턴하는 함수입니다. getTotal이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다. 인자 이름은 원하는 대로 지어주셔도 됩니다. getTotal 함수에서 인자로 받은 가격으로 각각 calculateTotal 함수를 호출해주세요. 그리고 그 결괏값을 더해서 반환해주세요. 참고사항 getTax 함수는 가격의 tax를 구하는 함수입니다. calculateTotal 함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다. getTotal 함수는 두 상품의 가격을 더해서 반환하는 함수입니다 function getTax(price) { return price * 0.1; } function .. 더보기 이전 1 2 3 4 5 6 다음
