React.js
1.단숨에 React.js 이해하기 :: create-react-app 없이
index.html 파일 하나로 끝내보죠.react.js와 react-dom.js만 있으면 돼요.<head>에 이걸 넣어요.ReactDOM으로 리액트의 루트를 원하는 위치에 끼워넣는다고 생각하면 돼요.이번엔 클래스 컴포넌트를 만들어 봐요.이번엔 함수 컴포넌트를 만
2.[React.js] 단숨에 JSX 알아보기
React.createElement()를 많이 쓰면 코드 파악이 어려워요.그래서 HTML과 유사한 방식으로 컴포넌트들을 생성할 수 있도록 JSX가 나왔어요.create-react-app으로 프로젝트를 생성해요.src/App.js를 열어보면 div, img, p, a 등
3.[React.js] 단숨에 라우팅 이해하기 :: Routing
리액트로 여러개의 페이지를 구축할 수 있어요.주소창에 /admin, /user 등을 입력하면 서로 다른 페이지를 보여주는거죠.그걸 라우팅이라고 불러요.우선 간단하게 해시를 이용할께요.주소창에 /간단하죠.그런데 해시를 이용하는건 좀 멋지지 않네요.리액트 라우터(react
4.[React.js] 단숨에 스타일링 익히기 :: styled-components
SCSS 같은거라 보면 돼요.설치할께요.상속도 되고 구조화도 가능해요.종합 예제를 만들어봐요.Box는 div 컴포넌트인 BoxParent를 상속받아서 패딩이 50px인 div에요.props 속성도 있어서 재사용이 가능하고, 자신 아래의 컴포넌트에 스타일을 별도로 적용할
5.[React.js] 단숨에 리덕스 익히기 :: react-redux
글로벌 이벤트라고 생각하면 편해요.실제는 그렇지 않겠지만 스토어는 리듀서들을 가진 오브젝트고, 실제 데이터는 리듀서에 들어있다고 생각해보세요. store.reducer.data파일 하나로 끝낼께요.리듀서는 이벤트 핸들러 같죠? 액션을 받아서 처리합니다.case 문에 그
6.[React.js] useMemo와 useEffect
함수형 컴포넌트에서 외부의 데이터를 가져와야 할 때가 있죠.useMemo와 useEffect를 쓸 수 있어요.둘 다 두 번째 파라미터로 외부 데이터의 변경을 관찰할 수 있는데요.만약 useEffect(함수, \[]) 이렇게 빈 배열을 넣으면 처음에 딱 한 번만 함수가
7.[React.js] 반복문으로 객체 생성하기 :: v-for of Vue.js
Vue.js에는 v-for가 있죠.JSX는 아래와 같이 사용해요.