React -1

김정현·2024년 4월 2일

목록 보기

1/9

node

: 자바스크립트 코드 실행

npm (node package manager)

: 의존성 관리(프로젝트에서 필요한 라이브러리..)
-빌드 : 개발 소스 -> 서비스 가능 상태(배포 가능상태)로 변경 (리액트 문법 소스 -> js)
-테스트

설치방법 
npm install 패키지명 -> 설치, 현재 프로젝트의 node_modules 폴더에 설치
=npm i 패키지명

npm --global install 패키지 -> 모든 프로젝트에 공유 가능한 위치에 설치
=npm -g i 패키지명


삭제방법
npm uninstall 패지키명 -> 삭제

yarn (npm과 동일 역할)

실치 속도가 빠름
UI

create : 프로젝트 생성
add 패키지명

설치 
npm i -g yarn

10 - 메이저 버전: 하위 버전과 호환되지 않은 큰 변화
5 - 마이너 버전: 호환성 x, 기능 추가, 변경사항이 있는 경우
1 - 패치 : 오류 수정, 보완

참고)
npm으로 script의 명령어 실행
npm run start
npm run build

yarn start
yarn build

VS 코드 확장 프로그램

ESLint : 자바스크립트 문법 자동 체크
Reactjs Code Snippets : 리액트 코드(템플릿) 자동 완성
Prettier-Code formatter : 코드 스타일을 자동으로 정리해주는 도구

WebPack

->index, html, ...css, ...js 모듈을 하나로 묶음

export : 모듈 내보내기

export default 변수명 -> import 변수명(변경가능) from...: 모듈을 1개만 내보내기 가능

export 변수명 : 모듈을 여러개 내보내기 가능 -> import (변수명) from ... / 변수명은 변경 불가 -> as 별칭

//Common.js 에서
const Common = {
  a: 1,
  b: 2,
};

export function add(num1, num2) {
  return num1 + num2;
}

export const person = {
  name: '이이름',
  age: 40,
};

export default Common;

//App.js 에서
import Common2 from './Common';
import Common, { add as plus, person } from './Common';
console.log(plus(10, 20));
console.log(person);

JSX

작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

-Fragment: 태그로 랜더링 X 생략하여 입력 가능.

	<>
      <div>첫번째 컴포넌트!</div>
      <div>신나는, 리액트 공부</div>
    </>

참고) 컴포넌트
-부분 화면
-함수형 컴포넌트 -> 화살표 함수 권장
-클래스형 컴포넌트

단일태그여도 반드시 닫아야함 (밑과 같이 생략가능)

      <input type="text" />

자바스크립트 표현식을 저장하려면 JSX 내부에 {}로 감싸면된다.

const App = () => {
  const name = "React";
  return (
    <>
      <div>첫번째 컴포넌트!</div>
      <div>신나는, {name}리액트 공부</div>
      <input type="text" />
    </>
  );
};

if문 대신 조건부 연산자(삼항조건식)

조건식 ? 참 : 거짓

 <div>신나는, {name ? name : '리액트'} 공부</div>

주석 - JSX문법에서

{/*  */}

해석될때 아예 배제됨(노출 x)

<input
//주석 ..
type="text" />

태그 내부에도 주석 처리 가능 (줄개행 해야함)

스타일 적용
-는뺴고 카멜표기법(앞 한글자만 대문자)로 표기

 const style = {
    backgroundColor: 'orange',
    color: 'white',
    height: '100px',
  };

  return (
    <>
<div style={style}>첫번째 컴포넌트!</div>
<div style={{color: "blue"}}>신나는, {name && name} 공부</div>
      {name === 'React' && <h1>아! 재미있다!</h1>}

클래스 적용

<div className="subject" style={style}>첫번째 컴포넌트!</div>

컴포넌트

클래스형 컴포넌트

Component 상속

render() {
	return (
    	JSX 문법 컴포넌트
    )
}

참고) 기본적으로 .prettierrc에 추가해야하는 속성

{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all"
}

IP 주소

-공인 IP : 모든 네트웨크에서 접근 가능한 주소
-사설 IP : 내부 네트워크에서 접근 가능한 주소

-localhost : 서버, 현재 PC
127.0.0.1

localhost:3000
3000 -> 3000 포트 : 데이터가 이동하는 통로

80 - HTTP
443 - HTTPS

props

1)properties를 줄인 표현
2)props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능
-객체 동결 상태, 삭제 불가, 속성 추가 불가

//축약전

const MyComponent = (props) => {
    return (
    <>
     <div>안녕하세요!, 제 이름은 {props.name}입니다.</div>
     <div>좋아하는 숫자는 {props.num}입니다.</div>
    </>
    );
};

//components 에서
const MyComponent = ({name}) => {

    return <div>안녕하세요!, 제 이름은 {name}입니다.</div>
};

export default MyComponent;


//App.js 에서
import MyComponents from './components/MyComponent';


const App = () => {
  return <MyComponents name="서이름" />
};

export default App;

-props 기본값 설정 : defaultProps

-?? -> undefined, null일때 기본값을 대체

자료형 표현할때 {}안에 넣으면 자료형 그대로 대입

propTypes를 통한 props 검증

-자료형 한정
prop-types : 강제하진 않음 (경고문만 출력)

MyComponent.propTypes = {
    name: propTypes.string,
};

-값 존재 유무
isRequired : 강제하진 않음(경고문만 출력)

MyComponent.propTypes = {
    num: propTypes.number.isRequired
};

김정현

다음 포스트