React

Javascript에 XML을 추가한 확장 문법이다.(그래서 HTML이 아니라 자바스크립트를 기반으로 함)React 개발 시 사용브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.ES6를 ES5로 변환. 즉, 오래된 브라우저에서도 ES

가장 큰 이유는 state는 변동사항이 생기면 state를 데이터 바인딩 해놓은 html도 자동으로 재렌더링 해주기 때문이다.기존의 js에서 변수바인딩 + 변수가 변경 된 상황에선 js코드로 "변수 내용 바뀌었으니까 html도 고쳐주세요 ~"라고 코드를 짰어야했다.참고

긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다.이걸 이용해, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있다.이렇게 Modal()이란 함수에 축약할 HTML을 return한다.그리고 이렇게 return된 HT

라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다.쉽게 말해, 다양한 주소의 요청이 들어오면 각 주소에 맞는 콘텐츠로 이동시켜주는 작업이다.출처 : 생활코딩html 파일 여러개 만들면 그 자체가 여러개의 페이지.a태그를 통해 이동하면 그게 라우팅.근데

할때 다양한 방법이 존재한다css 파일 Import : 가장 기본, 규모가 커질수록 관리가 어렵고 헷갈림Encapsulation : css에 해당하는 js 파일을 묶어 캡슐화한다. 코드의 가독성에 좋지않다CSS Module : React에서 제공하는것으로 js파일명.m

컴포넌트도 인생이 있다.. Life Cycle..페이지에 장착되기도 하고(mount)가끔 업데이트도 되고(update)필요없으면 제거되고(unmount)근데 이 컴포넌트의 인생에 간섭할 수가 있다 ?간섭은 갈고리를 달아서 하면된다.Detail 컴포넌트 등장 전에 이것좀

위 코드와 같이 상위 컴포넌트에서 하위 컴포넌트로 계속해서 props를 prop하는 과정을 prop drilling이라고 한다. 최상위 컴포넌트에서 하위로 전달한 content가 그 하위, 그리고 또 그 하위로 계속 전달되며 공유되고있다.명시적인 값의 사용 : Prop

출처: 코딩애플저런식으로 redux를 사용하면 store라는 공간에 데이터를 저장하고 각 컴포넌트에서 store에 있는 데이터를 꺼내간다. 그렇게 되면일단 props 전송이 필요없어진다.store.js로 가서 확인하면 되기때문에 관리가 용이하다(각 컴포넌트에 props

React는 SPA이다. webpack같은 번들러로 코드를 번들하고, html 파일에서 번들된 자바스크립트 파일을 불러와서 웹앱을 브라우저에서 실행한다.그런데 번들 파일이 다 불러와져야 실행되다 보니, 웹앱의 크기가 커지면 커질수록 성능에 악영향을 끼치게 된다.쉽게 말

크롬 브라우저에서 추가할 수 있는 몇가지 React 도구들을 소개한다출처 : 코딩애플기존 개발자도구의 elements 탭은 html 형식으로 태그를 표현하지만저걸 사용하면 React의 Component 단위로 표현을 해줌은 물론이요 state, props 조회도 가능하