Web Study/한입크기로잘라먹는리액트5 한입 크기로 잘라먹는 리액트 - 5 React 에서 API 호출하기 useEffect 를 사용하여 컴포넌트의 Mount 시점에 API 를 호출하고 해당 API 의 결과값을 일기 데이터의 초기값으로 이용 = fetch() 를 사용하여 API 를 호출 -> API 의 응답 데이터를 App.js 의 data 상태에 저장하여 초기화해주기 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonpla.. 2023. 3. 31. 한입 크기로 잘라먹는 리액트 - 4 전에 더미 데이터를 선언해주고 그 데이터만 일기 리스트에 보이게 만들었었다. 이번에는 이 더미 데이터를 없애주고, 직접 일기를 입력해준 내용이 나오게 만들어줘본다. 부모 컴포넌트인 App 에서 data를 관리하는 state 함수를 만들어주고 일기를 입력 받는 자식 컴포넌트에게는 해당 입력 필드의 값을 읽어서 데이터를 추가해줄 수 있는 setData가 포함된 함수를 넣어주고 일기를 보여주는 자식 컴포넌트에는 입력 받은 data 자체를 보내줘서 관리해준다. function App() { const [data,setData] = useState([]); const dataId = useRef(0); const onCreate = (author, content, emotion) => { const created.. 2023. 3. 30. 한입 크기로 잘라먹는 리액트 - 3 Props 컴포넌트에 데이터를 전달하는 방법 부모 컴포넌트에서 자식 컴포넌트에게 속성과 값을 넘겨주는 것 props 를 사용하여 데이터를 전달하면 컴포넌트는 해당 데이터를 활용하여 UI를 동적으로 생성하고 업데이트 할 수 있다. 기본적으로 키=값 형태로 넘겨주게 되는데, 넘겨줄 속성이 많아지면 속성:속성값 형태의 객체로 만들어서 전개 연산자(...)와 함께 사용해준다. const customProps = { 속성: 속성값, 속성2: 속성값2, }; // ... 결과적으로 자식 컴포넌트에서는 위에서 받아준 속성값을 props 객체에 담아서 넘겨주게 된다. 비 구조화 할당을 활용하여 props 객체에 담겨오는 속성값만 접근해줄 수 있다. // children 은 props 객체에서 children 키만 받아.. 2023. 3. 29. 한입 크기로 잘라먹는 리액트 - 2 자바스크립트 기초와 응용은 일단락 지었고, node 부분은 원래 배웠던 부분이 있어서 개념만 잡는 느낌이라 가볍게 넘어간다... CommonJS 방식으로 require('randomcolor') 로 가져와서 randomColor() 함수를 사용해줄 수 있다. 드디어, 리액트! Node 기반의 jS UI 라이브러리 - Webpack : 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 - Babel : JSX 를 사용할 수 있도록 해주는 컴파일 라이브러리 왜 리액트인가? 1. 리액트는 Component 기반의 UI 라이브러리이다. 기본적으로 중복 되는 코드 부분(헤더, 푸터 등)의 수정이 필요한 경우, 산탄총 수술(1발로 다수의 총상을 입는다는...) 이라고 불리는 문제가 발생하여, .. 2023. 3. 27. 이전 1 2 다음
