동탁의 개발자취

1. Props Props 란? 기본적으로 component에 원하는 value를 넘겨줄 때 사용하며 넘길 수 있는 value는 변수, 함수, 객체, 배열 등 JS의 요소라면 상관이 없다. 주로 component의 재사용을 위해 사용된다. // props의 생성 const Sayhello = (props) => { return Hello, {props.name}; } // component로의 사용 const App = () => { return ; } // Sayhello component안에 name tag로 동탁 value 전달 ! 단 props의 값은 임의로 변경해서는 안된다. // 안 좋은 예시 (값을 임의로 변경) props.name = props.name + '님' // 좋은 예시 (새로운 ..

Component 1. Component 란? - React에서 페이지를 구성하는 최소단위 - Component의 이름은 대문자로 시작 - Class Component / Function Component로 나뉨 const NewComponent = ({Test}) => { return {Test} } // Tip : padding 등 style을 사용시에는 px를 생략 가능하다. // NewComponent의 object에 {Test}를 넣어서 사용 const Test = () => { return ( 이건 TEST 입니다. ) } Component를 만든 후 다른 Component에서 자유롭게 활용 할 수 있다. ! Component의 이름은 항상 대문자로 시작한다. 2. Class Component..

JSX 1. JSX 란? JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장 HTML과 비슷하게 생겼으나 JavaScript로 HTML과 다른 부분이 있다. const App = () => { return ( Hello World ) } JSX를 실제 사용하게 되면 JS형식으로 Transcompile 된다. 2. JSX의 장점 1. 개발자의 편의성 향상 2. 협업에 용이 / 생산성 향상 3. 문법 오류와 코드량 감소 ! HTML과의 차이점 1. HTML 태그 내에서 JavaScript 연산 2. class = className 3. style은 Object로 4. 닫는 태그는 필수로 사용 5. 최상단 element는 반드시 하나여야 한다. // style을 objec..

최신 JS 문법 알아보기 React를 사용하기에 앞서 최신으로 사용하는 유용한 JS 문법을 정리 하였다. 1. var에서 let , const로 그동안의 변수 선언에서는 var를 많이 사용해 왔으나, 이제는 var를 사용하지 않고 let, const를 사용한다. const 는 한 번 값을 선언하면 값을 바꿀 수 없으며, 같은 스코프(중괄호) 내에서 중복된 이름을 가질 수 없다. let은 선언과 변경이 자유롭다. 만약 error가 생길 경우 const는 값이 다르면 error를 뱉지만 let은 error를 뱉지 않는다. 따라서 특수한 경우가 아니면 이제는 변수 선언에서 const를 사용하는 것이 좋다. 2. Array 메소드 1) forEach Array.forEach 는 배열의 요소를 이용해 순차적으로 ..