Java script/React (5) 썸네일형 리스트형 How to write clean react code 본 글은 Reed Barger의 How to write cleaner react code를 읽어보며 축약하여 번역/해석한 글입니다. (의역,오역이 있을 수 있습니다.) 원문 : www.freecodecamp.org/news/how-to-write-cleaner-react-code/ 리액트 개발자로서 우리는 간단하고 읽기 쉬운 깔끔한 코드 작성을 원한다. 이 가이드에, 나는 당신이 깔끔한 코드로 프로젝트를 만들고 당신의 코드를 확인하기 더 쉽게 해주는 최고의 일곱가지 방법을 서술하였다. 일반적으로 깔끔한 코드를 작성하는 것을 배우는 것은 당신을 더 가치있고 더 행복한 리액트 개발자로 만들어 줄 것이다. 시작해보자! 1. JSX 단축을 활용한다 아래 예시에서 우리는 Navbar 컴포넌트 내에 앱 title을.. LifeCycle LifeCycle 리액트의 각 컴포넌트에는 생명주기라는 것이 있다. 이런 생명주기는 Lifecycle이라는 메소드들로 구현할 수 있다. Lifecycle은 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트가 발생하는 것이다. 이러한 메소드들은 class형 컴포넌트에서만 사용이 가능하며 functional 컴포넌트에서는 react hooks를 이용해서 사용할 수 있다. 이 부분은 나중에 따로 정리하도록 하겠다. constructor(props) (mount) *메소드 바인딩 혹은 state초기화 작업이 없으면 필요하지 않다. / 먼저 super(props)를 통해 this.props를 생성자 내에서 정의해야한다. constructor는 this.state를 직접 할당할 수 있는 유일한 곳이며 .. React-navigation이란? React-navigation React-navigation은 react-native 앱의 네비게이션 기능과 히스토리를 간단히 관리 할 수 있는 라이브러리이다. 여기서 네비게이션은 일반 리액트 앱에서 라우트 기능과 비슷하다고 볼 수 있다. 리액트의 page처럼 네이티브에는 스크린이라는 개념이 있는데, 스크린은 react-navigation의 도움을 받아서 이동이 가능하다. - Stack navigator dataStructure 중 stack의 형식으로 구현되는 네비게이터이다. 이동시 screen이 하나 씩 stack 형태로 구현된다.(후입선출 - 노드를 순서대로 넣고 노드 제거시, 마지막에 들어간 노드를 먼저 꺼냄). 최초 스크린이 가장 먼저 스택에 쌓임. - > 다음 화면으로 이동 시, (화면 상으로.. React-Native React-native react-native는 자바스크립트로 모바일 환경 어플리케이션을 만들 수 있도록 해주는 라이브러리이다. 이름에서 알 수 있듯이 리액트의 개발 접근 방법을 모바일로 확장한 프로젝트이다. 일반적으로 Android의 경우 java, IOS의 경우 swift 등으로 개발을 하는데, 안드로이드와 IOS앱을 따로 만들어야 하는 경우 Native를 이용해 개발을 한다. js로 코딩한 react의 컴포넌트는 react native 플랫폼을 거쳐 ios, android 코드로 각각 변환된다.(js만으로 앱 제작이 가능하다는 것.) React native의 장점 - JS를 알고 있다면, 플랫폼 별 언어를 몰라도 앱 개발이 가능하다. expo, thirdPartyModule을 통해 기능을 받을 수 .. 이전 1 2 다음
