컴포넌트7 리액트[기초] propTypes propTypes 이란? 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용한다 propTypes 지정하는 방법 1. 코드 상단에 prop-types를 import 해준다 2. 컴포넌트에서 설정해준다(설정한 값은 전달될 때 무조건 설정한 형태로 전달되어야 한다) // 자식 컴포넌트 import PropTypes from 'prop-types'; const MyComponent = ({ name, children }) => { 생략.. } MyComponent.defaultProps = { name: '기본 이름' }; // name 은 무조건 문자열(string)형태로만 전달해야된다 MyComponent.propTypes = { name: PropTypes.string }; exp.. 2022. 5. 27. 리액트[기초] props.children props.children 는 컴포넌트 태그 사이의 내용을 보여주는 역할을 한다 부모 컴포넌트에서 리액트 사이에 작성한 문자열을 MyComponent 내부에서 보여주려면 props.children을 사용해야 한다 // 부모 컴포넌트 import MyComponent from './MyComponent'; const App = () => { return 리액트; }; export default App; // 자식 컴포넌트 const MyComponent = (props) => { return( // 안녕하세요, 제 이름은 기본 이름 입니다. 안녕하세요, 제 이름은 {props.name} 입니다. // children 의 값은 리액트 입니다. children 의 값은 {props.children} 입니다. .. 2022. 5. 27. 리액트[기초] 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. 리액트[기초] 초기 렌더링 과 조화 과정 렌더링 이란? 사용자 화면에 view를 보여주는 것을 말한다 초기 렌더링이란? 어떤 UI 관련 프레임워크, 라이브러리를 사용하던지 간에만 처음에 어떻게 보일지 정하는 초기 렌더링이 필요하다 리액트에서는 초기 렌더링을 다루는 함수 render 가 있다 render 함수란? 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다 html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다 조화 과정 이란? 리액트에서 뷰를 업데이트할 .. 2022. 5. 24. 이전 1 2 다음 728x90