깃 주소
이 상태로 세팅한다. 이건 JSX 문법
이렇게 태그를 바로 넣을 수 있는 문법이다.
배열을 바인딩하는 방법
이렇게 list를 선언한다.
ex01.js 를 생성 해보자. example 폴더 내부에
스프레드 연산자
let은 타입이 없기 떄문에 그냥선언
const 는 상수라 변경이 안된다.
const에 append하는 것은 가능하다. 왜냐하면 가리키는 주소가 같기 때문에
const는 RunTime하기 직전에 메모리에 다 띄워진다.
메모리에 띄워지고 Read-only로 바뀌는데,
const나 final은 초기화가 안되면 무조건 컴파일 에러가 난다.
추가하기
추가할 때는 a자체를 변경하지 않도록 하자.
// 스프레드 연산자를 사용해서 추가할 수 있다.
let a1 = [...a, 4];
Java
복사
상태관리를 위해서 비교하기 위한 초기데이터가 필요한데,
이 초기데이터가 변경이 안되게 막아야되고, 아마 변경이 안될 것
이전 데이터와 한번 비교해보자.
확인하는 명령어
데이터가 추가된 것을 확인
추가하기 (특이한 것)
user 객체 선언
개체 복사를 할려면, 스프레드 연산자를 사용하면 된다.
이렇게 개체가 복사 된다.
업데이트 하는 방법, 복사하고 같은 키값을 뒤에 붙여주면
원래 내용이 업데이트가 된다.
요약해서
1. 스프레드 연산자로 객체를 복사하고
2. 객체가 이미가지고 있는 키값에 새로운 값을 부여
3. 업데이트가 된다.
코드
삭제하기
삭제는 필터로 한다.
상수를 선언하고
스프레드로 복사하고
필터로 조건에 맞는 값을 추려내면 삭제가된다. 검색도 가능
검색하기
이렇게 21살보다 많은 사람들을 걸러내서 검색이 가능하다.
가공하기
가공할 때는 map으로 가공하면된다.
뭐 결국 업데이트랑 비슷하다.
결과 확인
스프레드 연산자 사용하고, 변경을 하면 두가지를 조합해서 응용하게 사용하게 된다.
화면 뿌리기
중괄호로 자바 스크립트 문법을 넣을 수 있고,
그 안에 또 중괄호로 변수를 바인딩 할 수 있다.
실행 문법 npm start
이렇게 바인딩 되어서 출력이 된다.
표현식은 리턴을 해주고 (불변 함수는 모두 표현식이다.)
왜냐하면 원본을 변경하지 않고 새로운 값을 줘야 되니까.
forEach문은 표현식이 아니라서 위에 그림처럼 사용이 안된다.
JSX문법은 한번 정리해보자.
css 바인딩 하는법
css파일은 첫글자가 대문자가 되어야 된다. 그래야 import가 가능하다.
전역 변수로 스타일을 주면 관리 하기 힘들다 이렇게 안하는게 좋음
css 임포트하고
스타일을 주고
이렇게 한 번 찍어보자. 안녕이 빨간색으로 변함
box라는 클래스를 만들어보자.
jsx문법은 이렇게 사용 className
jsx문법에서 class가 키워드이기 때문에 className으로 사용
class home{
// 이런식으로 로직 구현가능
}
Java
복사
이렇게 function을 바인딩 할 수 있고, 리턴되는 값이 여기에 쏙 들어간다.
이렇게 보통 li에다가 a태그를 걸테지만,
jsx 문법에서는 a태그를 사용하지 않는다.
무조건 부분리로딩 ajax같은것을 사용
컴포넌트 만들기
컴포넌트 폴더를 만들어 보자.
jsx 문법으로 js파일을 대문자로 만들어야 된다. (파스칼 문법)
이 스니펫 플러그인을 설치하자
rsf를 넣으면 이렇게 자동완성 시킨다.
금방 홈/글쓰기/로그아웃을 복붙해보자.
이렇게 function을 전역으로 등록할 수 있다.
<Hea 치면 자동완성으로 뜨는데,
엔터치면 바로 위에 import가 된다.
그리고 닫는 태그가 생기는데,
시작태그에서 /를 넣어서 바로 닫아줘서 컴포넌트로 쓸 수 있다.
컴포넌트 디자인하기
style component 라이브러리 사용
installation으로 가보자.
프로젝트 내부 터미널에서 해당 명령어로 설치를 해야된다.
npam install styled-components
Java
복사
package.json 에 들어가서 해당 내용이 추가가 되어야지 설치 완료
문법
태그와 디자인을 하나로 묶어주는 문법이다.
이거는 export하지마라 유지보수 어렵다.
스타일 컴포넌트는 이런식으로 먼저 초기화 해서, 스타일을 따로 먹일 수 있다.
좀 더 편하게 작업할려면 (자동완성 같은거) 플러그인 설치 해야된다.
많이 다운 받은 애를 다운 받아서 쓰자.
col 까지만 입력해도 자동완성이 된다.
그냥 스타일 컴포넌트를 function바깥에 두고 쓰자.
스타일된 컴포넌트를 태그에 넣으면 그 스타일을 쓸 수 있다.
이렇게 적용가능
그러니까 스타일 컴포넌트는 노출 시키지 말고
function Header를 export해야 그 스타일에 맞는 컴포넌트를 재사용이 가능하다
그러니까 DOM과 스타일을 컴포넌트로 관리하는게 중요! 그리고 그게 관리가 편하다.