{}2 리액트[기초] props props 란? properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다 props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수도 있다 props를 렌더링 할 때 에는 JSX 내부에서 {} 기호로 감싸 주면 된다 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 할 수 있다 자식 컴포넌트에서는 props의 값을 직접 바꿀수는 없다 const MyComponent = (props) => { // 안녕하세요, 제 이름은 React 입니다. return 안녕하세요, 제 이름은 {props.name} 입니다. ; }; export d.. 2022. 5. 27. 리액트[기초] JSX JSX를 여러 줄로 작성할 때는 괄호로 감싸고, 한 줄로 표현할 때는 감싸지 않는다 괄호로 감싸는 것이 필수 사항은 아니다 JSX 란? 자바스크립트의 확장 문법이다 XML과 비슷하게 생겼는데 이런 형식으로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX 장점 보기 쉽고 익숙하다 div, span, HTML 태그를 사용할 수 있을 뿐 아니라 컴포넌트도 JSX안에서 작성할 수 있을 정도로 높은 활용도를 가졌다 JSX 문법 ( 사용하려면 몇 가지 규칙을 준수해야 한다 ) 1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸주어야 한다 부모 요소로 div를 사용하고 싶지 않으면 import 구문에서 react 모.. 2022. 5. 24. 이전 1 다음 728x90