react_기초
<<React>>
<start> $ npx create-react-app something
<jsx> : 리액트에서 사용되는 JavaScript의 확장문법
<component> : HTML을 반환하는 함수
형식 : <Name property="something">
<property> : father component에서 child component로 보낼 수 있음
<child component> : argument로 부모 component의 prop을 받음
*웹사이트에 동적데이터를 추가하는 법
map : array.map(current => {return item})
<propTypes> : prop의 형태를 설정
<<class component>> : extends React.Component {}
-react는 자동적으로 class compoenet의 render method를 실행한다
<state> : object - data가 변하기 때문에 사용
사용 : state = {count : 0}
render() { return <> {this.state.count} </>}
<event> - props로 onClick등을 사용
<component life cycle>
*componentDidMount : component가 처음 render될 때 호출
*componentDidUpdate : setState마다 호출
componentDidUpdate(prevProps, prevState) {
if (prevProps.value !== this.props.value) {
doSomething();
}
}
*componentWillUnmount : component가 죽을 때
<state>
*<Something {...state}/>로 전달가능
<<create react-app>>
<npx> : 자동으로 update해줌
설치 - $ npm i npx -g
사용 - $ npx create-react-app {filename}
<.env>
NODE_PATH = src : 기본적으로 src 파일을 보도록
<<react-router-dom>> : 간단한 컴포넌트 묶음
$ yarn add react-router-dom
import { HashRouter as Router, Route} from "react-router-dom" - #
import { BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom"
*fragment : <> something </>
*Composition : 두 개 이상의 Route를 동시에 렌더링하는 방식
<Redirect> : 해당하는 페이지가 하나도 없으면 redirect
<Switch> : 한 번에 오직 하나의 Route만 Render하게 해줌(가장 첫번째 rendering)
*
<css module>
import styles from "./Header.module.css";
className - randomized
<styled Component>
설치 : $ yarn add styled-componenet
특징 : props를 줄 수 있음
사용 :
const List = styled.ul`
display: flex;
font-size: ${(props) => props.hi}
`
<List hi="12"> blabla </List>
<styled reset>
import {createGlobalStyle} from "styled-componenet";
import reset from "styled-reset";
const GlobalStyles = createGlobalStyle`
${reset};
`
export default GlobalStyles;
App.js에 <GlobalStyles></GlobalStyles>
<withRouter> : 다른 컴포넌트를 감싸는 컴포넌트
export default withRouter(Header)
감쌌기 때문에 Header는 (props)를 가질 수 있음
<<data>>
<Axios>
설치 : $yarn add axios
정의 : Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
특징 :
1. 별도의 설치가 필요하지만 fetch에 비해 많은 기능 지원과 문법이 간소화 됨
2. axios의 인스턴스를 configure해줄 수 있음
인스턴스 생성
const api = axios.create({
baseURL: "",
params: {},
})
<<container presenter pattern>>
container - data와 state를 가지고 api를 불러옴
presenter - 그 데이터를 보여줌(style)
<<api>>
const api = axios.create({});
export const moviesApi = {
nowPlaying: () => api.get("/"),
showDetail: (id) => api.get(`/tv/${id}`, {
params: {
append_to_response: "videos",
},
}),
search: (term) => api.get("/search/tv", {
params: { query: encodeURIComponent(term)},
}),
}
*params: { append_to_response: "videos"} : api가 지원하는 기능
- videos라는 객체를 더해서 가져오고 싶을 때
*encodeURIComponent(term) : js에서 uri를 encoding하는 방법
*router는 모든 route에 props 자동으로 할당함 (header에서의 withRouter같은 게 필요없음)
<<constructor>>
constructor(props){
super(props);
this.state ={};
}
<<Container>>
1. Detail
<didmount>
const{ match: {params: {id}}, history: {push}} = this.props
*push("/")으로 redirect가능
<<Presenter>>
1. Section
const Section = ({title, childeren}) => (
<Container>
<Title>{title}</Title>
<Grid>{children}</Grid>
</Container>
);
Section.propTypes = {
title: PropTypes.string.isRequired,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
};
2. Loader
<span role="img" aria-label="loading">asdf</span>
3. <Input onChange={updateTerm} />
; container's updateTerm = (event) => {const {target:{value}}= event; this.setState({searchTerm: value})}
props로 전달
<<Deploy>>
1. gh-pages
설치 : $ yarn add gh-pages
사용 :
"scripts": {
"deploy": "gh-pahges -d build",
"predeploy": "yarn run build"
}
"homepage":"https://hyeongjun-hub.github.io/nomflix",
2. netlify : frontend만 deploy해주는 웹사이트(static component)
signup -> create a new site -> github -> authorize -> nomflix -> choose branch
- push 할 때마다 yarn build, publish 실행하도록
<class component vs function component>
class - this, render 같은 사용방법을 고려해야 함
<<Hooks>> : react의 state machine에 연결하는 기본적인 방법
<Context & Redux>: Props를 계속해서 밑으로 전달하는 것 대신 데이터를 저장하는 공간
Context장점: 간단한 react 어플리케이션에 적용할 수 있지만 파워풀한 방법
Redux장점: 커다란 states와 많은 변화들이 있을 때 적합
<useContext>
context.js
export const someContext = react.creatContext();
const someContextProvider = ({children}) => {
const [user, setUser] = useState({
name: "형준",
age: "25",
})
const changeUser = () => setUser({...user, age: "26"})
return(
<someContext.provider value={{user, changeUser}}>{children}</someContext.Promvider>
)
}
export default seomContextProvider
App.js
function App = () => {
return(
<someContextProvider>
<Screen/>
</someContextProvider>
)
}
Screen.js
const Screen = () => {
const {user, changeUser} = useContext(someContext);
return(
<>
<button onClick={changeUser} />
</>
)
}
<useReducer>: Reducer function을 다이렉트로 사용할 수 있게 함
사용되는 때 : Component가 엄청난 수의 State를 가지고 있을
때 무엇을 하고 있는지 정확하게 파악하기 위해 정리정돈 작업을 하는 것
*reducer?
function reducer(state, action){
return - state를 <b>대체</b>할 object
}
const [state, dispatch] = useReducer(reducer, initialState);
함수 reducer가 return하는 object가 state의 대체가 됨
<button onClick={()=>dispatch({type:"increase"})}>Add</button>
dispatch는 함수 reducer와 연결하는 용도, reducer의 두 번째 인자(action)를 인자로 가짐
reducer라는 function는 다른 곳에 따로 둬도 됨
<uuid>
random number 생성