분류 전체보기321 KDT 5th 웹개발자 입문 수업 38일차 리액트 prettier, eslint 로 초기 세팅하기 1. npm i -D prettier 2. npm i -D eslint 리액트 폴더 최상위에 세팅하기 1. .vscode 폴더 생성 2. .vscode 폴더 안에 settings.json 파일 생성 { "[javascript]": { "editor.maxTokenizationLineLength": 2500, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.maxTokenizationLineLength" : 2500, "editor.formatOnSave" : true, "editor.defaul.. 2023. 3. 29. 한입 크기로 잘라먹는 리액트 - 3 Props 컴포넌트에 데이터를 전달하는 방법 부모 컴포넌트에서 자식 컴포넌트에게 속성과 값을 넘겨주는 것 props 를 사용하여 데이터를 전달하면 컴포넌트는 해당 데이터를 활용하여 UI를 동적으로 생성하고 업데이트 할 수 있다. 기본적으로 키=값 형태로 넘겨주게 되는데, 넘겨줄 속성이 많아지면 속성:속성값 형태의 객체로 만들어서 전개 연산자(...)와 함께 사용해준다. const customProps = { 속성: 속성값, 속성2: 속성값2, }; // ... 결과적으로 자식 컴포넌트에서는 위에서 받아준 속성값을 props 객체에 담아서 넘겨주게 된다. 비 구조화 할당을 활용하여 props 객체에 담겨오는 속성값만 접근해줄 수 있다. // children 은 props 객체에서 children 키만 받아.. 2023. 3. 29. KDT 5th 웹개발자 입문 수업 37일차 배열을 state 로 사용하면..? export default function StateProblem() { let [state, setState] = useState([0]); console.log('initial state : ',state); return ( {state} { state[0] = 1; setState(state); console.log('after state : ',state) }} > 1로 만들기 ) } 실제 콘솔창에 0 -> 1로 변화했는데, html 상에선 변경이 안되는 이유 원시 타입의 경우 값을 저장할 때 그 값 자체를 저장하지만, const location1 = 'korea'; const location2 = 'korea'; location1 === location2 //.. 2023. 3. 28. KDT 5th 웹개발자 입문 수업 36일차 JSX 문법 JSX 는 결국 Babel 에 의하여 JS 로 번역이 되므로 1. class -> className 기존 DOM 요소에 class 를 부여할 때 쓰던 class 를 className 이라고 써야 한다. (class 는 키워드이므로) 2. 데이터 바인딩이 용이 원래 HTML 은 정적인 페이지를 구현하는데 사용이 되었지만 현대의 웹은 서버와 통신을 하여 변경해줄 필요가 있으며 이 경우 DOM 에 JS로 접근하는 document.getElementById() 등을 사용해줘야 하지만, JSX를 사용하면 HTML 요소는 return () 안에, JS의 경우 { } 안에 써주면 된다. 3. JS 는 { } 안에 써준다. 대부분의 JS 문법을 사용할 수 있지만, 예외적으로 if 문 등은 불가능하다. ❥ .. 2023. 3. 27. 이전 1 ··· 45 46 47 48 49 50 51 ··· 81 다음
