목록React (19)

하얀 코딩

[React - 3] props

props (properties) 1. 컴포넌트의 속성(property)을 의미합니다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다. 2. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다. 3. 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다. 4...
React 2022. 12. 30. 00:31
[React - 2] JSX

JSX (JavaScript XML) const element = Hello, world!; JSX는 리액트 컴포넌트에서 xml 형식의 값을 반환해는 것 JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그렇다면 어떻게 해야 할까? 바로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이때 이용하는 것이 바로 “Babel”입니다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일합니다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다. Babel이란? Babel 은 자바스크립트의 문법을 확장해주는 도구다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거..
React 2022. 12. 29. 23:46
[React - 1] React

특징 1. 선언형 리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 2. 컴포넌트 기반 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발이 가능하다. 3. 범용성 Facebook에서 만든 Javascript 라이브러리로 프로젝트 어디에든 유연하게 적용 될 수 있다. 안정적이고 가장 유명하며, React-native로 모바일 개발도 가능하다. 4.가상 DOM 리액트는 메모리에 가상 DOM을 유지하고, 필요할 때만 실제 DOM에 렌더링하는 방식을 사용합니다...
React 2022. 12. 29. 22:53
이전 Prev 1 2 3 Next 다음