나디아 성장 일기

📌 State로 상태 관리하기  state: 컴포넌트의 상태를 의미하는 값   state 값이 바뀌면, react는 컴포넌트의 상태 변화를 감지해서 자동으로 컴포넌트를 리렌더링 👉 컴포넌트 값이 바뀌었을 때의 UI를 보여줌 * 리 렌더(Re-Render) / 리 렌더링(Re-Rendering) : 다시 렌더링 하는 것 (업데이트)    state는 한 컴포넌트 안에 여러 개 만들 수 있다.   useState 함수는 2개의 요소를 담은 배열을 반환한다.1번째 요소: 새로 생성된 state의 값 2번째 요소: 상태 변화 함수 (state 값을 변경하는 함수)     🔺함수 컴포넌트에서 state 생성하기 1. import로 내장 함수인 useState 불러오기import { useState } fro..

이벤트 핸들링(Event Handling) : 웹 내부에서 발생하는 사용자의 행동 (ex. 클릭, 입력, 스크롤 등) 📌 onClick : 클릭 시 행동하는 함수 case 1. 버튼 태그 안에 바로 함수 작성 { console.log(text); }} case 2. 변수에 저장 후 함수명만 사용 onClick엔 함수 이름만 설정해야 함 (onClickButton() 👉 ❌) const onClickButton = () => { console.log(text); }

props (propeties) : 부모 컴포넌트가 자식 컴포넌트에 전달한 값 부모 컴포넌트 👉 자식 컴포넌트만 가능 부모 컴포넌트에서 호출한 자식 컴포넌트에게 props를 부여하면, props는 객체로 묶여서 자식 컴포넌트의 매개변수로 들어간다. props를 통해 값에 따라 다른 UI를 보여줄 수 있다. case 1. 1. 컴포넌트의 매개변수로 props 전달2. {props.key}로 사용 // App.jsx function App() { return ( ) } // Button.jsx const Button = (props) => { return ( { props.text } ) }; export default Button; case 2. 1. 데이터를 객체{}로 묶고 2. Spread 연산자(....

JSX (JavaScript eXtenstions) : 확장된 자바스크립트 문법 변수 값 활용하기 { 변수 } 컴포넌트 내부에 변수를 선언하고, 그 변수의 값을 {중괄호}를 이용하여 html로 렌더링하도록 만들 수 있다. 📌 주의사항 1. {중괄호} 내부에는 Javascript 표현식만 넣을 수 있다. 숫자, 문자열, 삼항 연산자(? 조건문), 변수명 등 ⭕ if문, for문 불가 ❌ const Main = () => { const number = 10; return ( main { number % 2 === 0 ? "짝수" : "홀수" } ); }; 2. 숫자, 문자열, 배열 값만 렌더링 된다. boolean형, null, undefined 불가 ❌ { number % 2 === 0 ? "짝수" : "..

React 컴포넌트 (Component) 컴포넌트 (Component) : html 태그들을 반환하는 함수 보통 함수 이름을 따서 부름 (ex. function App( ... ) 👉 App 컴포넌트 컴포넌트 함수명은 반드시 첫 글자가 대문자여야 함 함수 표현식 function Header() { return ( Header ) } 화살표 함수 const Header = () => { return ( Header ) } 컴포넌트 계층 구조 컴포넌트는 계층 구조로 나타난다. 루트(root) 컴포넌트 : 모든 컴포넌트의 조상 역할을 하는 컴포넌트 원하는 대로 변경 가능하지만 보통은 App을 루트 컴포넌트로 둠 부모 컴포넌트 : 다른 컴포넌트의 호출을 품은 컴포넌트 자식 컴포넌트 : 다른 컴포넌트의 retur..

react 시작하기 react app 생성하기 npm create vite@latest vite 사용 * vite (비트) : 프론트엔드 개발을 위한 툴 Dev Server : 개발 환경에서 HMR과 같은 기능을 제공하는 개발용 서버 기능 Build : Production 배포를 위한 소스코드 번들링 기능 버전 확인하기 18.2.0 버전이 아니면 삭제 후 재설치해야 함 // package.json "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, 기존 라이브러리 재설치하기 npm i react 실행하기 npm run dev ESlint 설치 .eslintrc.js에서 옵션 수정 "no-unused-vars": "off", : 사용하지 않는 ..

모듈 시스템 1. CJS (Common JS modul System) : Node.js에서 가장 일반적으로 사용되는 모듈 시스템 값 내보내기 module.exports = { 내보낼 값들(프로퍼티) } // math.js function add(a, b) { return a + b; } function sub(a, b) { return a - b; } module.exports = { add: add, // add라는 변수에 add()함수 저장 sub: sub, } 값 불러오기 require("./파일명"); // index.js const moduleData = require("./math"); // math 모듈러로부터 객체 형태로 내보내진 값을 반환함 console.log(moduleData); /..

class 컴포넌트 옛날 문법 요즘 잘 안씀 React에서 제공하는 Component라는 클래스를 extends (상속) state 만들기 object 형태로 작성 class 작명 extends React.Component { constructor(props) { super(props); // class state 만들기 this.state = { name : 'kim', age : 20 } onIncrese = () => { const newCount = this.state.count + 1; this.setState({ count: newCount }); }; } render() { return ( '안녕' {this.props} { // state 변경하기 this.setState({age : 21..

입력값 가져오기 / 블로그 글 발행, 삭제 기능 onChange / onInput : 에 입력 시 코드 실행하는 이벤트 { ... }}/> 입력값 가져오기 : 사용자가 입력한 글 다루기 e.target.value : 이벤트가 발생한 html 태그에 입력한 값 1. 입력값을 저장할 state 생성하기 let [value, setValue] = useState(''); 2. 입력값으로 state 값 변경하기 { setValue(e.target.value)}}/> 이벤트 버블링 막기 e.stopPropagation() onClick={(e)=> { e.stopPropagation(); // 이벤트 버블링 막기 }}> 👍 * 이벤트 버블링: 이벤트가 상위 html로 퍼져서 중복되는 현상 입력칸 종류 블로그 글 ..

props: 부모 state 👉 자식에게 전송 / 상세 페이지 기능 만들기 props : 부모의 state 사용 가능 부모 state 👉 자식에게 전송 ⭕ 부모 👉 자식 이외의 전송은 불가능 ❌ 문자, 숫자, 함수도 전송 ⭕ 부모 state 👉 자식에게 전송하기 1. 2. 자식 컴포넌트 function의 파라미터로 props 전달 3. {props.작명} 사용 function Modal(props) { return ( {props.작명} ) } 모달창 배경색 다르게 주기 props.color로 구멍을 뚫어놓으면 컴포넌트에서 색상 변경만 해주면 됨 function Modal(props){ return ( { props.글제목[0] } 날짜 상세내용 ) } 상세 페이지 기능 만들기 : 글 제목을 누르면 해당..