본문 바로가기

Coding/React34

React - Phone book 만들기(1) 이 예제는 아래 블로그에서 본 예제를 기반으로 만들었습니다. 참고 바랍니다. https://velopert.com/3613 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG 이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무 velopert.com react에서 제공하는 리액트 웹 만들기 도구를 활용하면 react로 웹을 만들기 편리하다. 만약에 도구가 없다면 필요한 모듈과 라이브러리를 각각 다운을 해야 하지만, react에서 제공해주는 도구를 활용하면 한번에 가능하다. create-react-app 이 도구를 활용하는 곳이고, phone.. 2020. 8. 6.
React - functional vs Class React의 component는 functional과 class 각각 사용할 수 있지만 차이점이 있다. 가장 큰 차이점은 State의 사용여부 이다. functional은 State, life cycle를 사용할 수 없지만, class에서는 State를 사용할 수 있다. 만약 State를 변경하거나 초기에 State를 가져야 한다면 class를 사용해서 component를 만들어야 한다. 그래서 class가 functional에 비해 기능적으로 더 많은 것을 제공하는 것처럼 보이지만, Hooks라는 개념이 있어서 그렇지 않다고 한다.(아직 Hooks를 몰라서...) functional 형태 const App = () => ( ); Class 형태 class App extends Component{ con.. 2020. 8. 1.
React - State Life Cycle(state 생명주기) State는 사람의 생명주기 처럼 생성(태어남) - 변화(성장) -제거(죽음)으로 구성 되어있다. State가 생성될 때 *constructor *render 순으로 저장이 되었다가 render가 끝나면 *componentDidMount 내장 메소드가 실행이 된다. ※Mount는 component가 처음으로 시작할 때를 말합니다. 업데이트할 때 *render 순으로 React DOM 및 refs 업데이트가 되었다가 render가 끝나면 *componentDidUpdate 내장 메소드가 실행이 된다. 제거할 때 *componentWillUnmount 내장 메소드가 실행이 된다. 예시) 예제 : https://programmingwithmosh.com/react/guide-to-learn-useeffect-.. 2020. 7. 18.
React - Lifting state(state 끌어올리기) Lifting state 개념을 이해하는데 이틀 정도 걸렸다. 결국 이해는 했지만, 사용하기 어려움은 있다. 이전글에 있는 그림을 인용하면... state는 하위에서 수정해서 상위에 값을 변화 시킬 수 있다. 즉, 상위에 있는 state 값을 하위에서 수정하여 상위로 올려주는 것이 Lifting state이다. Codestates 강의시간(sprint review)에 이해하게 된 개념인데, 그림을 아무리 봐야 코드로 구현하는 것은 매우 어려웠다. Codestates의 있는 code 인용해서 설명을 하면 우선 상위 하위 관계를 먼저 보면 최상위 App - VideoList - VideoListEntry 구조이다. 전체적인 코드를 보면 아래 사진과 같다. *빨간색이 state 진행방향 *파란색이 state .. 2020. 7. 13.
반응형

티스토리툴바