반응형 리액트5 리액트 CRUD 해보기 연습용으로 만든 Dummy데이터는 고정되었기에 사용자의 액션에 따라서 데이터를 읽고 쓰고 업데이트, 삭제해보자! 그러기 위해서는 DB를 구축하고 API를 만들어야하는데, JSON서버를 이용해서 RESTful API를 만들어 보자! [REST API란?] Representational State Transfe uri주소와 메서드로 CRUD요청을 하는 것! 즉 웹 데이터 전송 방식을 말한다. Create : POST Read : GET Update : PUT Delete : DELETE URI는 식별하고, URL은 위치를 가르킨다. URI: 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스 URL: 흔히 웹 주소라고도 하며, 네트워크 상에 리소스가 어디에 있는지 알려주기 위한 .. 2022. 10. 22. React Context API 처음만난 리액트 강의에서 발췌한 내용입니다. 컴포넌트의 props를 통한 데이터 전달 기존에 일반적인 react application은 데이터가 컴포넌트의 props를 통해 부모가 자식에게 단방향으로 전달이되었다. 로그인여부, 프로필 정보등을 전달하려면 반복적이고 지저분한 코드가 많이 생성된다. 이렇게 여러 컴포넌트에 걸쳐 자주 사용하는 데이터의 경우 코드의 복잡함 등을 해소시켜 주기위해 사용할 수 있는것이 context이다. Context는 리액트 컴포넌트들 사이에서 데이터를 기존의 props로 전달하는대신 컴포넌트 트리를 통해 곧바로 컴포넌트로 전달해 어떤 컴포넌트던 데이터에 쉽게 접근할 수 있다. 코드를 한 곳에서 관리하기때문에 디버깅에도 유리하다. [언제 context를 사용해야할까?] 로그인 여.. 2022. 10. 12. React TodoList 만들기 * style 컴포넌트: tailwindcss Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 🔷[App.js] //App.js function App() { const [value, setValue] = useState('') const [todoData, setTodoData] = useState([]) const handleSubmit = (e) => { e.preventDefault() // 새로운 할 일 데이터 const newTodo = { id: Date.now(), //현재 date값 titl.. 2022. 10. 3. class 컴포넌트에서 function 컴포넌트로 컴포넌트 자체를 바꾸기 class 컴포넌트 extends Component ~ 지우기 export default class App extends Component { ~ 🔽 export default function App() { ~ render함수 없이 바로 return() class 컴포넌트는 render()안에 return() 함수형 컴포넌트는 render()없이 바로 return() render() { return ( ...내용 ) } 🔽 return ( ...내용 ) [state바꾸기] useState Hook을 이용해서 표현하기 react에서 useState를 가져와서 사용한다. const [todoData, setTododata] = useState([]) useState의 인수 todoDa.. 2022. 9. 26. 이전 1 2 다음 728x90 반응형
