React basic

작업용 폴더 생성해당 폴더에 터미널 열기프로젝트 생성에디터 오픈메인 페이지/src/App.js 코드 작성미리보기

강남 우동 맛집 이라고 출력이 된다.href, id, className, src 등 여러가지 html 속성들에도 가능합니다.위처럼 쓰면 이 된다.이것을 데이터바인딩 이라고 한다.태그에 인라인 방식으로 스타일을 지정하고 싶다면JSX 상에서는 style={ } 안에 자

맨 윗줄에 import { useState } from ‘react’ 하고 원하는 곳에서 useState(’보관할 자료’) 쓰면 state에 자료를 잠깐 저장할 수 있습니다.나중에 쓰고 싶으면 let a, b = useState(’남자 코트 추천’);a의 자리는 sta

HTMLJSXClick이 대문자{ } 중괄화 사용그냥 코드가 아니라 함수를 넣어야 동작한다<div> 를 클릭 시 함수 안에 있는 코드가 실행 됩니다.재사용하지 않을 함수면 이렇게 작성도 가능합니다.state 만들 때 두번째 변수에 담긴게 state 변경을 도와주는

원본 데이터를 직접 조작하는 것 보다는\*\*기존 값은 보존해주는 식으로 코드를 짜는게\*\* 좋습니다.(이게 요즘 트렌드)그래서 let copy 같은 변수에 기존 배열 데이터를 복사해 놓고 조작하는 식으로 합니다.state 변경함수를 쓸 때기존 state === 신규

많은 div들을 한 단어로 줄이고 싶다면

동적인 UI란 사용자가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등 을 의미한다.html, css로 미리 UI 디자인을 만든다.UI의 현재 상태를 state로 저장영어로 작명시 state변경함수는 set을 앞에 붙이는게 관습이다.state에 따라서

자식이 부모의 state를 가져다가 쓰고 싶을 때

return 안에 축약할 html코드가 온다.<Modal /> 컴포넌트를 사용할 때 마다 <div>안녕</div> 이 나온다.this.state 라는 변수를 만들고 object 형식의 데이터들을 할당한다.state변경 this.setState() 기본

html 안에서 이미지를 넣고 싶으면 \*\*\*\*이미지를 import 한다.\*\*\*\*import 작명 from ‘./이미지경로’이미지경로가 필요한 곳에서 작명한 변수를 사용한다.리액트로 개발을 마치면 모든 코드를 한 파일로 압축해 주는 빌드 작업을 하는데 /s

페이지를 나누고 싶으면 일반 html, css, js 사이트는 하나의 페이지마다 각각 html파일을 만들었지만 리액트에서는 html 파일을 하나만 사용한다.그래서 리액트에선 다른 페이지를 요청하면 내부에 있는 를 바꿔 보여주면 된다.직접 구현도 가능하나 일반적으로 re

컴포넌트가 많은 경우 스타일링을 하다 보면 class 만들어 놓은걸 까먹고 중복해서 또 만들거나다른 컴포넌트의 원하지 않는 스타일이 적용되거나CSS파일이 너무 길어져서 수정이 어렵거나같은 경우가 있다.그래서 스타일을 바로 적용해 컴포넌트를 만들 수 있는데…컴포넌트를

컴포넌트는생성이 될 수도 있고(mount)재렌더링이 될 수도 있고(update)삭제가 될 수도 있다.(unmount)라이프사이클을 배우는 이유는 컴포넌트 인생 중간중간에 간섭할 수 있기 때문이다.간섭이란 컴포넌트가 장착될 때 , 업데이트 될 때 등 특정 코드를 실행할

참고자식컴포넌트에서 props 라고 파라미터를 하나만 작성하는게 아니라 객체 타입으로 { state1, state2, … } 라고 작성하면 props.탭 대신 탭 이라고 쓸 수 있다.

애니메이션을 만들고 싶다면,애니메이션 동작 전 스타일을 담을 className 만들기애니메이션 동작 후 스타일을 담을 className 만들기transition 속성도 추가원할 때 2번 탈부착의 과정을 거친다.탭 이라는 state가 변할 때마다 fade 라는 state

App.js 에 있던 state를 TabContnt 컴포넌트에서 사용하려면 App → Detail → TabContent 의 순서로 props를 2 번 전송해 줘야 한다.다른 대안으로는 기본 React 문법인 Context API 또는 외부 라이브러리인 Redux를 쓰

JS파일 하나에 state들을 보관해 각 컴포넌트가 접근해 사용할 수 있다.Installredux toolkit은 redux의 개선버전으로 문법이 조금 더 쉽다.package.json 파일에서 “react”, “react-dom”의 버전이 18.1.x이상이어야 사용 가