React#phone-book#예제3 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. React - Phone book 만들기(1) 이 예제는 아래 블로그에서 본 예제를 기반으로 만들었습니다. 참고 바랍니다. https://velopert.com/3613 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG 이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무 velopert.com react에서 제공하는 리액트 웹 만들기 도구를 활용하면 react로 웹을 만들기 편리하다. 만약에 도구가 없다면 필요한 모듈과 라이브러리를 각각 다운을 해야 하지만, react에서 제공해주는 도구를 활용하면 한번에 가능하다. create-react-app 이 도구를 활용하는 곳이고, phone.. 2020. 8. 6. 이전 1 다음 반응형
