본문 바로가기

전체 글63

[React js] props 대신 쓸 수 있는 context API 1. 범위를 생성한다 let 재고context = React.createContext(); 2. 같은 값을 공유할 범위를 지정한다 { shoes.map((a,i)=>{ return ( ) }) } 3. 변수로 받아오기 & 사용하기 function Card(props) { let 재고 = useContext(재고context); return ( { props.shoes.title } { props.shoes.content } & { props.shoes.price } {재고[props.i]} ) } export default App;​ hook이기 때문에 자동으로 import 할 수 있음 # 다른 파일(Detail.js)에서도 context를 쓰는 방법 1. 생성한 범위 앞에 export를 붙여준다. ex.. 2021. 8. 13.
[React js] Ajax Ajax 서버에 새로고침없이 요청을 할 수 있게 도와줌 1.jquery $.ajax() 2.axios.get() 3.쌩 자바스크립트 fetch() yarn add axios (또는 npm install axios) onClick={()=>{axios.get()}} get요청 .then() 요청성공시 실행하는 코드 .catch() 요청실패시 실행하는 코드 then(result) 가져온 result.data 결과 데이터만 json은 따옴표가 쳐져있음 object가아님. 서버와 통신은 텍스트로만 되기때문. axios를쓰면 json을 object로 알아서 바꿔줌.(fetch는 안해줌) 내가 생각한 답 let shoes사본 = [...shoes] shoes변경([...shoes사본,...result.data]) .. 2021. 8. 12.
[React]SASS SASS 를 설치한다. yarn add node-sass (npm install node-sass) SASS는 CSS를 좀더 프로그래밍언어 스럽가 젝성가능한 preprocessor.(css에서 변수 연산자,함수,extend,import사용가능) 브라우저는 css밖에 모르므로 sass 작성파일을 css로 컴파일 해야함. node-sass가 알아서해줌 2021. 8. 11.