React (8) 썸네일형 리스트형 [React] 특정 값이 업데이트 될 때만 실행하고 싶을 때 (useEffect, componentDidUpdate) 1. Class 컴포넌트 - componentDidUpdate 사용 componentDidUpdate(prevProps, preState) { if (prevProps.value !== this.props.value) { toDo(); } } -> props 안에 들어 있는 value 값이 바뀔 때만 특정 작업을 수행 2. function 컴포넌트 - useEffect 사용 useEffect(() => { console.log(name); }, [name]); -> 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 변수를 넣어서 작업을 수행 리액트를 다루는 기술 책 공부하다가 나중에 쓰일 것 같아서 블로그에 정리해놓기.. 공부 열심히 해야징 React typescript React.ChangeEvent<HTMLInputElement> React와 typescript가 적용된 예제를 보다가 { userId = e.target.value; } } /> onChange 안에 e 옆에는 매개변수의 타입의 형태가 정의되어 있어야 하는데 처음보는 녀석이 나와서 물어보니 입력받은 값의 타입을 알아서 정의하는 것이였다.. React map() 함수 정리 map() 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 구문 arr.map(callback, [thisArg]) 매개변수 callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가짐 - currentValue : 처리할 현재 요소 - index (선택) : 처리할 현재 요소의 인덱스 - array (선택) : map()을 호출한 배열 thisArg (선택) : callback을 실행할 때 this로 사용되는 값 예제 let examples = [1,2,3]; let result = example.map((example) => {return num * num }); // 결과 1,4,9 const bookItems = this.props.b.. 전자정부 프레임워크 front-end react https://github.com/eGovFramework/egovframe-template-simple-react GitHub - eGovFramework/egovframe-template-simple-react Contribute to eGovFramework/egovframe-template-simple-react development by creating an account on GitHub. github.com ▲ 위의 링크를 들어가시면 아래의 내용이 자세히 나와있습니다. 표준프레임워크 심플홈페이지 FrontEnd ※ 본 프로젝트는 기존 JSP 뷰 방식에서 벗어나 BackEnd와 FrontEnd를 분리하기 위한 예시 파일로 참고만 하시길 바랍니다. 환경 설정 프로젝트에서 사용된 환경 프로그램 정.. axios 개념과 http method 종류 axios HTTP통신을 하는데 매우 인기있는 javascript 라이브러리 브라우저와 Node.js 플랫폼에서 모두 사용 가능 IE8이상을 포함한 최신 브라우저 지원 Promise를 기반으로하여 async/await 문법을 사용하여 XHR요청을 쉽게 가능 * Promise 란? 자바스크립트 비동기 처리에 사용되는 객체, 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용 * async & await 란? 자바스크립트의 비동기 처리 패턴 중 최근에 나온 문법, 콜백 함수와 프로미스 단점을 보완 * XHR(XMLHttpRequest) 이란? AJAX 요청을 생성하는 JavaScript API, 브라우저와 서버간의 네트워크 요청을 전송 장점 구형 브라우저 지원 요청 중단 가능 response timeout.. [React] 상태 관리 라이브러리 Redux와 Mobx 상태와 상태관리란? 상태는 웹 페이지 내에서 눈에 보이는 데이터(ex.메뉴, 게시글 제목, 게시글 내용, 아이디) 뿐만 아니라 서버와 주고 받아야하는 모든 데이터를 말함. 화면에 보이는 것과 화면에 보이지 않는 모든 것들을 상태라고 하고 이를 관리하는 것을 상태 관리라고 함. 상태관리 라이브러리를 왜 사용할까? SPA 를 개발할 때, 화면에 보이는 상태들이나 화면에 보이지 않는 상태들도 실시간이나 비동기로 변화하기 때문에 상태가 언제 어떻게 변화하였는지 알 수 없어져 컨트롤하기 힘든 상황에 놓이게 됐음. 프로젝트의 규모가 커지고 복잡해지면서 방대한 데이터들을 관리하기 어려워짐. Component 간의 정보 공유 - 자식 컴포넌트 간의 다이렉트 데이터 전달이 불가능 - 자식 컴포넌트들 간의 데이터를 주고 .. Props와 State 개념 정리 1. props (읽기전용) : 부모 컴포넌트가 자식 컴포넌트에게 주는 값, 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없음 class 인 경우는 this를 사용하여 값을 받음 class Person extends React.Component { render() { const {name, age} = this.props; // 이 코드를 사용하지 않으면 {this.props.name} return ( 이름 : {name} ) } } function 인 경우는 아래와 같이 받음 const Person = ({name,age}) => ( // (props)라고 사용하면 {props.name} 이름은 : {name} ) props 기본 값 설정 - static de.. DOM, Virtual DOM이란? 1. 기본 개념 웹 브라우저: HTML 문서를 해석하고 화면을 통해 해석된 결과를 보여줌 렌더링: 해석한 HTML 코드를 화면을 통해 보여주는 과정 API(Application Programming Interface): 응용 프로그램에서 사용할 수 있도록, 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 2. DOM과 HTML의 차이점 HTML(HyperText Markup Language): 화면에 출력하고자 하는 모양과 구조를 단순 텍스트로 구성하여 문서로 작성한 것 DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있음 3. DOM(Document Object Model) 이란? 브라우저는 HTML 코드를 해석하여 요소들을 트리 형태로 구.. 이전 1 다음
