본문 바로가기
react - Component로 props 전달하기(Passing Props to a Component) Component로 props 전달하기(Passing Props to a Component) React의 Component는 props를 사용하여 서로 객체, 배열 및 함수를 포함하여 모든 자바스크립트 값등의 데이터를 주고받는다. Familiar props props는 JSX 태그에 전달하는 정보를 의미한다. 아래의 코드에서 img 태그 안에 있는 className, src, alt, width, and height 는 정보를 전달하기 때문에 props라고 한다. function Avatar() { return ( ); } component에 props를 전달하는 방법(Passing props to a component) export default function Profile() { return ( ).. 2021. 11. 3.
port 사용여부 확인 > netstat -tulpn | grep [:port] 2021. 11. 2.
React - 중괄호{ } 가 있는 JSX의 JavaScript JavaScript in JSX with Curly Braces Passing strings with quotes JSX에 string을 이용하여 정적으로 속성을 전달하려면 ' ' 또는 " " 로 사용한다. 하지만 동적이게 만들기를 원한다면 { }를 사용해야한다. { } 를 사용하면 JSX에서 바로 JavaScript를 사용할 수 있다. export default function Avatar() { return ( #정적 #동적 ); } Using curly braces: A window into the JavaScript world { }안에서 JavaScript 표현은 변수 뿐만 아니라 함수 또한 항상 동작한다. !주의 - 태그에 { }를 사용할 수는 없다. 예) - " " 안에 { }를 사용하면 문.. 2021. 11. 2.
React - Writing Markup with JSX Writing Markup with JSX https://beta.reactjs.org/learn/writing-markup-with-jsx React Component는 React가 브라우저에 렌더링하는 일부 마크업을 포함할 수 있는 JavaScript function 이다. React Component는 JSX라는 구문확장을 이용하여 화면에 보여질 수 있다. JSX는 HTML 과 비슷하지만 조금 더 엄격하고, 동적인 정보를 표시할 수 있다. The Rules of JSX JSX는 HMTL 처럼 보이지만 사실은 그 아래에서는 JS 객체로 변환된다. 이로인해 HTML과 JSX는 비슷한지만 유의해서 써야할 점들이 생긴다. 1. Return a single root element JSX는 JavaScript.. 2021. 11. 1.