얼렁뚱땅

JSX란? JavaScript XML 자바스크립트에 XML을 추가한 확장형 문법 XML 또한 HTML의 표현법을 확장한 문법이므로 JSX = HTML + JS라고 보면 될 듯하다. 하나의 파일에 JS와 HTML을 동시에 작성할 수 있다. 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 React, React Native에서 사용된다. JSX 장점 가독성이 높다. 작성하기 쉽다. XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있다. JSX 문법 1. 하나의 부모 여러 개의 요소를 표현하는 경우 반드시 하나의 부모로 감싸야한다. export default function App() { return ( ); } View : UI를 구성하는 가장 기본적인 요소로 웹 프..

React Native에서는 다양한 이벤트를 제공한다. 그중 많이 사용되는 이벤트 몇 가지만 알아보자. 아래 Button 컴포넌트 글을 참고해서 작성했다. 2021.09.04 - [React Native] - [React Native] Button Component [React Native] Button Component 컴포넌트 재사용할 수 있는 조립 블록으로 화면에 나타나는 UI 요소 (ex. 제목, 입력창, 할 일 목록) 단순히 UI 역할만 하는 것이 아니라 부모로부터 받은 속성(props)나 자신의 상태(state)에 따라 다 dev-sailor.tistory.com 1. Press 이벤트 버튼에서 많이 사용된다. TouchableOpacity 컴포넌트에서 설정할 수 있는 Press 이벤트의 종류..

props는 부모 컴포넌트에서 받은 값으로 변경할 수 없다. VS state는 컴포넌트 내부에서 생성되고 값을 변경할 수 있으며 이를 이용해 컴포넌트 상태를 관리한다. 상태(state)란 컴포넌트에서 변화할 수 있는 값이다. 상태가 변하면 컴포넌트는 리렌더링 된다. 예전에는 클래스형 컴포넌트에서만 상태를 관리할 수 있었다. 하지만 리액트 16.8 버전, 리액트 네이티브 0.59 버전부터는 Hooks라는 것을 사용해 함수형 컴포넌트에서도 상태를 관리할 수 있다. 요즘 개발 추세는 함수형 컴포넌트 + Hooks 를 사용하는 것이다. useState 사용하기 리액트 Hooks 중 useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 해준다. const [state, setState] = useStat..

props란 properties를 줄인 표현으로, 부모 컴포넌트로부터 전달된 속성 값 혹은 상속받은 속성 값을 말한다. 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서는 해당 props를 사용할 수 있지만 변경하는 것은 불가능하다. props의 변경이 필요할 경우 props를 설정 및 전달한 부모 컴포넌트에서 변경해야 한다. 1. 속성으로 props 전달하기 button component 글에서 만든 Mybutton 컴포넌트를 사용할 것이다. App.js (부모) Mybutton1.js (자식) import PropTypes from 'prop-types'; const Mybutton1 = (props) => { return ( alert('TouchableOpacity')} > ..