React/기초19 리액트[기초] props props 란? properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다 props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수도 있다 props를 렌더링 할 때 에는 JSX 내부에서 {} 기호로 감싸 주면 된다 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 할 수 있다 자식 컴포넌트에서는 props의 값을 직접 바꿀수는 없다 const MyComponent = (props) => { // 안녕하세요, 제 이름은 React 입니다. return 안녕하세요, 제 이름은 {props.name} 입니다. ; }; export d.. 2022. 5. 27. 리액트[기초] export 와 import 모듈 내보내기 (export) export는 다른 파일에서 이 파일을 import 할 때 , 아래의 코드처럼 선언한 MyComponent 클래스를 불러오도록 설정할 때 사용한다 export default MyComponent; 모듈 불러오기(import) App컴포넌트에서 MyComponent 컴포넌트를 불러와서 사용할 때 import를 사용한다 import MyComponent from './MyComponent'; const App = () => { return ; }; export default App; 2022. 5. 26. 리액트[기초] 클래스형 컴포넌트, 함수형 컴포넌트 컴포넌트를 선언하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다 ▷ 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수 컴포넌트와 Hooks를 사용하도록 권장하고 있다 차의점 클래스형 컴포넌트 함수형 컴포넌트 state 기능 및 라이프 사이클 기능 사용 가능 [장점] 선언 하기 훨씬 편리하고 메모리 자원도 덜 사용하기 때문에 프로젝트를 완성하고 빌드 한 후 배포 할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다 [단점] state 과 라이프 사이클 API 사용이 불가능 (리액트 v16.8 이후에는 Hooks 기능이 도입 되면서 다른방식으로 비슷하게 사용가능) 임의 메서드를 정의 할 수 있다 render 함수가 꼭 있어야하고 그 안에서 보여주어야 할 JSX를 반환 해야한다 2022. 5. 26. 리액트[기초] JSX JSX를 여러 줄로 작성할 때는 괄호로 감싸고, 한 줄로 표현할 때는 감싸지 않는다 괄호로 감싸는 것이 필수 사항은 아니다 JSX 란? 자바스크립트의 확장 문법이다 XML과 비슷하게 생겼는데 이런 형식으로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX 장점 보기 쉽고 익숙하다 div, span, HTML 태그를 사용할 수 있을 뿐 아니라 컴포넌트도 JSX안에서 작성할 수 있을 정도로 높은 활용도를 가졌다 JSX 문법 ( 사용하려면 몇 가지 규칙을 준수해야 한다 ) 1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸주어야 한다 부모 요소로 div를 사용하고 싶지 않으면 import 구문에서 react 모.. 2022. 5. 24. 리액트[기초] Virtual DOM DOM 이란? Document Object Model의 약어이다 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다 웹 브라우저는 DOM을 활용해 객체에 자바스크립트와 CSS를 적용하는데 DOM은 트리 형태라서 특정 노드를 찾거나 수정, 제거, 삽입이 가능하다 Virtual DOM 실제 DOM에 접근하여 조작하는 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용한다 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때 3가지 절차가 있다 1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리 렌더링 한다 2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다 3. 바뀐 부분만 실제 DOM에 적용한다 2022. 5. 24. 리액트[기초] 초기 렌더링 과 조화 과정 렌더링 이란? 사용자 화면에 view를 보여주는 것을 말한다 초기 렌더링이란? 어떤 UI 관련 프레임워크, 라이브러리를 사용하던지 간에만 처음에 어떻게 보일지 정하는 초기 렌더링이 필요하다 리액트에서는 초기 렌더링을 다루는 함수 render 가 있다 render 함수란? 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다 html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다 조화 과정 이란? 리액트에서 뷰를 업데이트할 .. 2022. 5. 24. 이전 1 2 3 4 다음 728x90