front-end/react (3) 썸네일형 리스트형 React useState() React에서는 상태가 감지 되어야 리랜더링을 해준다. 그 기본 원칙을 잊지 말자! Sound.jsx import React, { useState } from 'react'; // React에서는 상태가 변하지 않는 이상 절대 변하지 않는다! // 상태가 먼저 변해야 한다. /* 1. 불변성의 원칙 : 홈페이지가 로딩 되면 바뀌면 안 된다. 어떤 값을 변경하고 싶으면 상태를 이용해서, 상태를 이용해서 변경 더욱 쉽게 쓸 수 있는 것들을 배울 것이지만 , 더 쉽다고 다 때력박으면 안된다. 이걸 왜 쓰지 , 목적에 맞게 사용해야 한다. props -> context -> redux */ const Sound = () => { // 강아지 버튼, 고양이 버튼 // 강아지 버튼을 눌렀을 때 강아지의 울음소리가 .. React 구조와 기본 동작 index.html 파일로 html파일이 한 개이다. 한 개의 html 파일 , 즉, 한 개의 뼈대로 그 속 안의 내용만 바꿔줄 것이다. 큰 구조를 파악해보려 한다. index.html파일의 id가 root인 div태그에 집중해보자. 설명도 읽어보면 해당 html파일은 템플릿이라는 설명을 하고 있다. index.js파일에서 line 7을 보면 document.getElementById('root'));을 통해 index.html파일에 있던 div태그를 가져온다. 쉽게 설명하자면 해당 태그를 가져온뒤 내용을 화면에 뿌려주는 형태로 이해하면 된다. div태그를 가져온 뒤 render라는 함수를 통해 App의 내용을 랜더링 해주는 것이라고 이해했다. App.js import "./App.css"; import.. React 정의 및 용어 , 설치 ReactJS 란? - 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작된 자바스크립트 기반 라이브러리 (+ XML과 합침) - 싱글 페이지 애플리케이션이나 모바일 어플리케이션 개발에 주로 사용된다. 쉽게 얘기하자면 , 하나의 프레임을 그대로 유지한 채 그 내용만 갈아끼우는 형태이다. - 특정 데이터에 변화가 생길 때 매번 변화를 주기 위한 코드를 작성하는 것이 아닌, 기존 코드를 없애고 다시 새롭게 랜더링한다. 랜더링(Rendering) - 화면에 보여주는 것 - 코드가 번역되어 실행 된 뒤 화면을 통해 사용자에게 보여진다. 초기 랜더링(Mount) - 가장 처음으로 랜더링 되는 것 - render() 함수를 사용하여 view를 정의 하고 초기 랜더링을 진행하게 된다. 밑의 동영상.. 이전 1 다음
