Study

[React_study] Ajax (post, fetch)

* POST 요청 axios.post('URL', {name : 'kim'}) 실행시 서버로 { name: "kim" } 자료가 전송이 된다. 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 된다. * 동시에 Ajax 요청 여러개 요청하기 Promise.all( [axios.get('URL1'), axios.get('URL2')] ) 위의 코드처럼 구성을 하게 되면 URL1, URL2로 GET요청을 동시에 해준다. 둘 다 완료시 특정 코드를 실행하려면 .then() 뒤에 작성하면 된다. * object/array 자료 전송 원래 서버는 문자 자료만 주고 받을 수 있다. 따라서 object/array 자료는 JSON형태로 전송을 보내야 한다. JSON은 문자 취급을 받기 때문이다. ex) "..

[React_study] Ajax (서버와 통신)

* AJAX 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 AJAX라고 한다. AJAX로 GET/POST요청하려면 방법 XMLHttpRequest fetch() axios라이브러리 사용 * axios라이브러리 설치 npm install axios * AJAX요청하는 법 (참고) react에선 거의 서버와 ajax를 이용해서 통신을 한다. import axios from 'axios' function App(){ return ( { axios.get('url정보 넣기').then((result)=>{ console.log(result.data) }) .catch(()=>{ console.log('error') }) }}>button ) } ..

[React_study] useEffect (실행조건 & clean up function)

* useEffect에 넣을 수 있는 실행조건 ( [ ] ) [ ] : useEffect에 실행조건을 넣을 수 있는곳 원래 실행조건을 넣지 않으면 mount, update시 실행된다. 실행조건을 추가하게되면 실행조건의 state가 변할 때만 실행이 된다. useEffect(()=>{ console.log("change") }, [count]) useEffect()의 두번째 파라미터로 [ ] 를 넣을 수 있음 거기에 변수나 state같은 것들을 넣을 수 있음 그렇게 하면 [ ]에 있는 변수나 state가 변할 때만 useEffect안의 코드를 실행해준다. 위의 예시는 count라는 변수가 변할 때만 useEffect안의 코드가 실행된다. (참고) [ ] 안에 state 여러개 넣을 수 있음 (참고) [변수..

[React_study] Lifecycle & useEffect

* Lifecycle - 컴포넌트에는 Lifecycle이라는 개념이 있다. 생성 (mount) 재렌더링(update) 삭제(unmount) 컴포넌트가 Lifecycle을 하게 될 때 특정 코드를 실행할 수 있다 갈고리(hook)을 달아서 코드를 넣어주면 됩니다. 그럼 페이지 장착시, 업데이트시, 제거시 코드실행가능 그래서 저걸 Lifecycle hook 이라고 부릅니다. componentDidMount(), componentDidUpdate(), componentWillUnmount() 의 역할을 한다. * React에서 Lifecycle hook사용법 (예전 버전) class 문법을 이용한 컴포넌트 생성 및 함수명을 작성해주어 특정 Lifecycle에서 코드 실행 class Detail2 extends..

[React_study] styled-components (CSS in JS)

* styled-components - 컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생긴다. class를 만들고 까먹거나 중복해서 만든경우 갑자기 다른 컴포넌트에 원하지 않는 스타일이 적용되거나 CSS 파일이 너무 길어져서 수정이 어렵거게 된다. 이런 경우가 발생 할 수 있다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는 styled-components 라는 라이브러리를 설치하여 이용하면 된다. * styled-components 설치 - 터미널에 아래의 명령어를 입력해주어서 설치한다. npm install styled-components - 사용하고 싶은 컴포넌트 상단에 아래의 명령어처럼 import해준다. import styled from 'styled-components' * ..

[JavaScript][clean-code] 함수, 메서드, 생성자

* 함수, 메서드, 생성자 자바스크립트의 함수는 많은 일을 한다. 함수는 일급객체로 동작하다보니 고차함수로 쓸 수도 있고 함수형 프로그래밍도 가능 그렇다보니 자바스크립트의 함수의 사용도가 넓은것에 따라서 오는 어려운 부분이 있다. 어려운 부분중 하나인 함수, 메서드, 생성자 구분이다. * 자바스크립트의 함수는 1급 객체 변수나, 데이터가 담길 수 있다. 매개변수로 전달 가능 (콜백 함수) 함수가 함수를 반환 가능 (고차 함수) * 자바스크립트 this - this가 전부 다른고 사용도 또한 다르다. 함수의 this func(); // 전역객체 메서드에서의 this 메서드란?? 객체에 의존성이 있는 함수, OOP 행동을 의미 메서드에서의 this는 호출된 객체를 바라본다. obj.method(); 생성자 ..