본문 바로가기

Java script

(21)
React-Native React-native react-native는 자바스크립트로 모바일 환경 어플리케이션을 만들 수 있도록 해주는 라이브러리이다. 이름에서 알 수 있듯이 리액트의 개발 접근 방법을 모바일로 확장한 프로젝트이다. 일반적으로 Android의 경우 java, IOS의 경우 swift 등으로 개발을 하는데, 안드로이드와 IOS앱을 따로 만들어야 하는 경우 Native를 이용해 개발을 한다. js로 코딩한 react의 컴포넌트는 react native 플랫폼을 거쳐 ios, android 코드로 각각 변환된다.(js만으로 앱 제작이 가능하다는 것.) React native의 장점 - JS를 알고 있다면, 플랫폼 별 언어를 몰라도 앱 개발이 가능하다. expo, thirdPartyModule을 통해 기능을 받을 수 ..
React-Redux React-Redux react-redux는 react와 redux를 연결해주는 역할을 한다. provider : react로 작성된 컴포넌트들을 provider안에 넣으면 하위 컴포넌트들이 provider를 통해 redux store에 접근이 가능해진다. import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import { App } from './App' import createStore from './createReduxStore' const store = createStore() ReactDOM.render( // React의 props처럼 redux로 만든 store를 Pro..
Redux의 기본 개념과 예시 Redux redux는 react, angular등에서의 상태관리를 위한 라이브러리이다. 1. Reducer Reducer는 유저가 액션을 디스패치하여 스토어의 상태를 바꾸고자 할 때, 액션에 따라 기존의 상태를 새로운 상태로 만들어 낸다. 여기서 중요한 점은 Reducer는 순수함수여야 한다는 점이다. 따라서 Reducer안에서 동적인 처리나 변화가 있어서는 안된다. (a가 입력되 면 반드시 b가 출력되도록) const reducer = (prevState, action) => { // 새로운 스테이트 만들어주기 switch (action.type) { case "LOG_IN": return { ...prevState, user: action.data, }; case "LOG_OUT": return {..
Props / State Props / State Props props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것이다. (읽기 전용) import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; ---------------------------- import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; //컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회 가능. //props 는 객체 형태로 전달(=>destructuring 사용 가능성), //만약 ..