리액트 배우기

모델과 뷰를 사용한다.하지만 리액트는 오직 View만 신경 쓰는 라이브러리이다컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념,템플릿은 보통 데이터 셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데,이와 달리 컴포넌트는 재사

번들러라고 부르며 이걸 사용 시 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한다. src/index.js 에서 파일을 다 불러와 번들링 할 예정ES6 → ES5 문법으로 변환구버전 웹 브라우저와 호환하기 위해서이 코드는 App 이라는

컴포넌트를 선언하는 방식은 두 가지이다.함수 컴포넌트클래스형 컴포넌트 state 기능 및 라이프사이클 기능을 사용할 수 있다.임의 메서드를 정의 가능하다.src/MycComponent.js 파일 생성코드 작성function 대신에 화살표 함수를 사용export defa

properties; 컴포넌트 속성을 설정할 때 사용하는 요소props 값은 해당 컴포넌트를 불러 사용하는 부모 컴포넌트에서 설정 <Mycomponent name="heyhey"/> → 부모 컴포넌트에서 넘겨주기→ props.children 을 사용해서 사용가능

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값 props를 바꾸려면 부모 컴포넌트에서 바꿔야 한다. 컴포넌트에 state를 설정할 때 사용반드시 super(props) 호출해야 한다.현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Compo

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것onmouseover (hover)onclickonchange ( form)카멜 표기법으로!onClick ..이벤트에 실행할 함수 형태의 값을 전달한다.컴포넌트 자체에는 이벤트 생성 불가<div> 같은 DO

DOM을 직접적으로 건드려야 할 때 사용버튼이 onClick 이 되면 clicked이 되었다라고 바뀌고, validated가 '0000'이면 true 아니면 falseinput 창에서onChange로 적을 때마다 password가 바뀌게 해주었다.className 을

map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 배열 내 각 요소를 규칙에 따라 변환한 후 새로운 배열을 생성callback : 새로운 배열의 요소를 생성하는 함수thisArg : (선택) callback 함수 내부에서 사용할 this 레

컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다.어떤 작업을 업데이트 전후로 작업을 처리하거나 , 불필요한 업데이트 방지를 위해 필요Will 접두사어떤 작업을 작동하기 전에 실행Did 접두사어떤 작업을 작동한 후에 실행모든

함수 컴포넌트에서도 상태관리를 할 수 있는 작업새 프로젝트로 만들기$ yarn create react-app hooks-tutorial주의 components 폴더 만들때 src안에 만들기 가장 기본적인 Hook이며, 함수 컴포넌트에서도 상태 관리가 가능하게 한다.클래

useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.총합구하기: const sum = numbers.reduce((a,b)=>a+b)반복 component : {list.map((value,index)=>( <li key={index

소규모 프로젝트일 경우 CSS 스타일링으로만 해도 충분CSS 클래스를 중복되지 않게 만드는 것이 중요하다 → CSS Selector .App a{... } : App 클래스 안의 a태그에 적용하고 싶다 .App .logo{ ... } : App 클래스 안의 log

$ yarn create react-app todo-app todo-app 생성$ yarn add sass classnames react-iconsSass 설치 react-icons : 예쁜 아이콘최상위 폴더에 .prettierrc 생성<TodoTemplate>T

TodoList에서 todos를 받아와서 map() 을 이용해 todoListItem에 보내주기 check 가 되어있는지 확인 → 아이콘 바꾸고, {cn('checkbox' , true)} false인지 class로 저장value를 useState로 입력을 관리하고on

useState의 기본값에 함수를 넣어주기 2500개 추가해주기→ 확실히 성능이 느려진다.리액트 개발자 도구에 Profiler를 사용하면 자세하게 알 수 있다.자신이 전달받은 props가 변경될 대자신의 state가 바뀔 때부모 컴포넌트가 리렌더링 될 때forceUpd

다음 기회에

사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 보여준다 사용자와의 인터랙션이 자주 팔생하는 요즘 웹에는 적당하지 않다.화면 내에서 전환이 일어날 때마다 html을 계속 서버에 요청하면

라우트 내부에 또 라우트를 정의하는 것<Route path="/profiles" exact render={()=><div>사용자를 선택해 주세요</div>}/>component 대신 render라는 props를 넣어주었다.컴포넌트 자체를 전달하는 것이

슬라이딩 윈도우 방식으로 접근했는데 -> 시간초과sum()을 사용하면 시간복잡도가 O(N^2)이라 그런가

서버쪽 데이터를 받아올 때는 API를 호출함으로 써 데이터를 수신하는데 이 과정에서 시간이 걸리기 때문에 이 작업을 비동기적으로 처리하게 된다.비동기 작업을 할 때 가장 흔히 사용하는 방법콜백 지옥을 예방하기 위해 나온 기능Promise를 더 쉽게 사용할 수 있도록 하

onSelect가 되면 category 바꿔주기 현재 category 값이 무엇인지에 따라all 이면 query 값을 공백으로 설정하고 all 이 아니라면 "&=category=카테고리" 형태의 문자열로 그리고 그 값을 주소에 포함시켜 준다 .category 값이 바뀔

$ yarn install react-router-dom@5 버전 조심!! const category = match.params.category || 'all'카테고리가 선택되지 않았으면 기본값 'all'로 사용하겠다.현재 선택된 카테고리 값을 URL 파라미터를 통해

로그인 정보애플리케이션 환경 설정테마 등 전역적으로 사용할 데이터가 있을 때 유용한 기술$ yarn create react-app context-tutorialcreateContext: 새 Context를 만들 때 사용, 기본 상태를 지정한다.props로 받아오는 것이

전역 상태를 관리할 때 효과적프로젝트 규모가 클 경우에 더 좋다보수성 효율 극대화,미들웨어라는 기능으로 비동기 작업에 효율적이다.상태에 변화가 필요하면 액션이 발생한다.이는 하나의 객체로 표현된다. type이란 필드를 가지고 있어야 한다.액션 객체를 만들어 주는 함수어

react에서 아이콘 사용하기$ yarn create react-app todo-apphttps://react-icons.github.io/react-icons/input의 placeholder 글자색 바꾸기호버하면 버튼 색 서서히 바뀌게 하기짝수열만 색 바꾸

vite로 애플리케이션을 시작하기 위해 yarn 을 설치합니다brew install yarnyarn create viteReact => typescript => 프로젝트 들어가서 yarn으로 설치yarn dev : 시작하기(vite 되게 편리한 것 같다.. )CRA 는