props 부모 component의 state를 자식 component에서도 사용하려면 props로 전송해서 써야한다. props 전송은 부모->자식 만 가능하다. props로 부모>자식 state 전송하는 법 부모 component 에서 <Modal 작명={state이름}> 자식 component function에 ...

map 함수를 이용한 JSX 내 반복문 JSX 내에서는 for문을 사용할 수 없다. map()함수를 이용하여 반복문을 사용할 수 있다. map() 안에 콜백함수에는 파라미터를 2개까지 사용할 수 있는데, 첫번째 파라미터는 해당 array 의 자료, 두번째 파라미터는 해당 array의 index번호다. import './App.css'; impo...

동적인 UI 만드는 3 step html CSS로 미리 디자인을 완성한다. UI의 현재 상태를 state로 저장한다. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성한다. function App () { let [modal, setModal] = useState(false); return ( <div&...

복잡한 html을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. component라고 합니다. 이걸 이용하면 함수나 변수를 만들듯이 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 넣을 수 있습니다. function을 이용해서 함수를 하나 만들어주고...

복사, 수정, 적용 array나 Object로 된 state를 변경할 때는 기존 state를 copy하여 수정 한 후 setState 해줘야 한다. let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']); <button onClick={ ()=>{ let copy =...

1. useState() 사용하기 useState를 사용하려면 우선 상단에 useState를 import 해야 한다. useState라고 입력 후 엔터를 치면 상단에 자동으로 import 된다. state는 최상위 컴포넌트에 만드는게 좋다. 부모>자식 간 props 전송은 가능하지만 반대는 안되기 때문이다. import { useState }...

JSX란? import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> </div> ) } export default App; App.js 이 우리의 메인 페이지다. App.js에 div...

1. 개발환경 셋팅 1-1. node JS 다운로드 및 설치 node JS (LTS 버전)을 다운받아 설치한다. nodejs 1-2. VS Code 다운로드 및 설치 VS Code Editor를 다운받아 설치한다. VS Code 2. React 프로젝트 생성 2-1. 작업용 폴더 생성 작업용 폴더 생성 후 우클릭 하여 PowerShell창 열기 ...

[ScrollMagic] 스크롤매직 라이브러리 - 기초편 [ScrollMagic] 스크롤매직 라이브러리 - 중급편

디자인패턴 중 하나인 MVC 패턴 MVC패턴은 디자인패턴 중 하나입니다. 디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 “규약”을 통해 쉽게 쓸 수 있는 형태로 만든 것을 말합니다. 어떠한 앱을 만든다고 한다면, 그 앱을 유지보수 하고 또 다...