본문 바로가기

전체 글

 (274)
[React.js] 몇가지 이벤트 제어 방법 //useState input이벤트 const [text, setText] = useState('') const onChangeHandler = e => setText(e.target.value) // //클래스 컴포넌트에서 input 한번에 제어하기 const onChangeHandler = e => { this.setState({ [e.target.name]: e.target.value }) } // //Enter 이벤트 const onEnterHandler = e =>{ if(e.key === 'Enter'){ //엔터누르면 발생할 내용 } }
filter() Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter Array.prototype.filter() - JavaScript | MDN Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute devel..
[React.js] Redux 개념 단순히 전역상태 관리를 한다면 Context Api를 사용하는 것만으로도 충분하다. 하지만 더 세부적이고 체계적으로 관리해야 되는 큰 프로젝트라면 리덕스를 사용하는 편이 유지 보수적인 측면이나 작업 효율도 더 좋다고 한다. 1. ACTION 상태의 변화가 발생하면 액션이 발생한다. 액션은 하나의 객체로 표현되는데 다음과 같이 표현되며, type을 반드시 가지고 있어야 한다. { type: 'NEW_ACTION', text: 'Hello World' } type 이 외의 값들은 상태가 변화될 때 참고하는 값으로 작성자가 임의로 넣을 수 있다. 액션 = 상태 정보 객체 // 어떤 일이 일었나는지 저장하는 것 developer.mozilla.org/ko/docs/Web/JavaScript/Reference/G..
onContextMenu 마우스 우클릭 이벤트 onContextMenu={e => { e.preventDefault(); //버튼을 마우스 우클릭시 메뉴가 뜨는 것을 방지해 준다. }} onClick이벤트는 좌클에 대한거 onContextMenu는 우클 이벤트
[React.js] Context import React, { createContext } from 'react' => 새 context를 만드는 함수 createContext 자식 컴포넌트 또는 손자 컴포넌트에서 필요한게 있고 필요하지 않은게 있을 수 있다. 이 때 context를 이용하여 필요한 요소만 공급해서 성능을 향상시킬 수 있다. => provider와 consumer 단순히 전역 상태 관리만 하면 Context API를 사용하는 것만으로 충분하다. 하지만 더 세부적이고 체계적으로 관리하려면 리덕스를 사용하는게 좋다.
아키텍처 종류 MVC: Model-View-Controller MVVM: Model-View-View Model MVW: Model-View-Whatever
REST REST(Representational State Transfer) 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 것을 뜻한다. 여기서 자원이란 해당 소프트웨어가 관리하는 모든 것을 의미한다. 주로 JSON과 XML을 통해 자원의 상태를 주고 받는다. 이외에도 text 등도 가능하다. HTTP URI(Uniform Resource Identifier)를 통해 자원을 명시하고, HTTP 메소드(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다. 따라서 HTTP프로토콜을 그대로 활용한다는 장점이 있다. REST CRUD Operation Create: 생성(POST) Read: 조회(GET) Update: 수..
[React.js] 이벤트핸들러 인자 전달 인자가 없을 경우에 항상 onClick={deleteHandler} 이런식으로 썼기 때문에 평소와 같이 onClick={deleteHandler(image)} 썼더니 안되고 onClick={() => deleteHandler(image)} 화살표 함수로 작성하니 정상 작동됨 예제를 보면 아래와 같이 되있는데 this.deleteRow(id, e)}>Delete Row Delete Row ko.reactjs.org/docs/handling-events.html 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org

티스토리툴바