전체 글142 React - Phone book 만들기(5) 지금까지 구현한 것들을 도식화하면 다음과 같다. 그러면 추가하는 data를 출력을 했으면, 추가를 하는 것을 구현을 하면된다. App.js에서 handleCreate 함수에서 매개변수로 받은 data를 state에 추가를 하면된다. 여기서 handleCreate에 이전에 데이터들을 받아온다. 그 이유는 React는 새로 생성 되거나 변경사항이 있으면 렌딩이 다시 되기 때문에 기존의 데이터에는 영향을 주면 안된다. 아직 간단한 예제라서 잘 이해는 안되지만... 그렇기 때문에 Javascript에서 주로 사용했던 push, pop 같은 mutable한 방식대신에 immutable한 concat, slice 같은 메소드들을 사용해야 한다. React App을 확인해보면...그리고 여기서 부터는 console도.. 2020. 8. 7. React - Phone book 만들기 (4) 조금 더 동적인 웹으로 만들기 위해 이벤트 핸들을 한다. React App에 있는 input을 입력하는 것을 바로바로 출력할 수 있도록 먼저 작성해본다. 먼저, 입력되는 값을 저장할 수 있도록 state를 만들고 handleChange라는 함수를 만들었다. handleChange 함수는 state 값을 바꿔주는 함수이다. 즉, input에서 들어오는 값을 state에 저장하는 함수. 그리고 input에 이벤트를 넣어준다. React에서 이벤트는 주로 onClick 이라든지 onChange 든지 이렇게 사용한다. 이전 javascript로 DOM을 조작할 때는 소문자(onclick, onchange)로만 작성 했지만, React는 camel 표기로 사용한다. 입력된 값을 출력할수 있도록 render에 {t.. 2020. 8. 7. React - Phone book 만들기(3) Phonelist 파일에 직접 목록을 입력 했지만, 이것을 props 개념을 활용하여 App.js에서부터 받아오면 App.js 파일에 state를 만들고 render에서 information 변수로 PhonForm으로 상속 시켜준다. PhoneForm에서는 App.js에서 상속받은 데이터를 this.props로 상속받은 데이터를 또 Phonelist에 상속을 시켜준다. 여기에서 key값도 같이 상속을 시켜주는데 React 공식문서에서 배열을 렌더 할때는 그배열을 구분해주는 unique한 key값을 가져한다고 한다. key를 따로 지정안해도 React App에서는 잘 렌더 되지만, console에서는 error를 발생한다. phonelist에서 information을 상속을 받아서 넣고자 하는 곳에 넣어주.. 2020. 8. 7. React - Phone book 만들기 (2) 아직 Hook을 배우지 않아서 기존에 있는 함수 형태의 App.js를 class 형태로 변환하고 기본적인 code를 설명하면 import는 from으로부터 모듈을 가져온다는 것이다. import './App.css'는 App.css파일을 읽어와서 웹을 꾸민다. 주석 처리된 함수형과 아래 있는 class 형태는 같은 동작을 하는 코드이다. export default App은 App이라는 함수를 내보낸다. 이것이 다른 파일에서 import로 불러와서 component로 사용이 가능하다. 주석처리한 부분을 지우고 파일 목록에서 component들을 한곳으로 모으는 폴더를 만든다. component 폴더 안에 있는 component는 실제로는 index.js에서 실행되기 때문에 index.js에 있는 App을 .. 2020. 8. 7. 이전 1 ··· 17 18 19 20 21 22 23 ··· 36 다음 반응형
