Programing/react (13) 썸네일형 리스트형 [React] - state 변경 const Test = () => { let [val, setVal] = useState(0); return ( {setVal(val+1) }} > {val} ); } get(val) : 값만 가져오는 곳 set(setVal) : 설정, 값변경 결국에는, SET, GET 메소드를 사용하는 이유는 외부로부터 변수값에 직접적으로 접근하는것을 막기 위해서다. 직접 접근하개 되면 값이 변하게 되고 그러면 데이터 무결성이 깨질 수 있기 때문이다. * state 의 값을 변경하기 위해선 setVal 값으로 바꾼다! array, object state 변경 하려면 [...val] {...val} 이런식으로 카피본을 만든다. ... - spread operator 라고하는 문법인데 array나 object 자료형 왼쪽.. [React] - 데이터 바인딩 state에 값을 담아 둘 수가 있다. react 특성 상 title이라는 값이 변경이 되면 자동으로 재렌더링(데이터만 바뀌면 자동으로 바뀌는)되는 구조이다 보니 이런식으로 사용이 된다. function App(){ let [title, setTitle] = useState('제목'); return ( { title } ) } 글이 부족한 것 같아 데이터 바인딩을 검색해보니 양방향, 단방향 바인딩이 나오는데, view - model / model - view 값이 있으면 표출해주고, 값이 바뀌면 자동으로 재렌더링 되는것을 말하는 것 같다. 단점으로는 성능이슈가 있다고 한다..(요새 하드웨어가 좋아서 티가 안날것같은...) 단방향 예시 const [inputValue, setInputValue] = use.. [React] - JSX 문법 JSX 문법 1. html에 class 넣을 땐 className (class 키워드랑 겹쳐서 Name을 추가시킴) JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호} 데이터 바인딩 하려면 {변수명} 작성하면된다. const App = () => { const val = "val 값" return( {val} ) } {val} = "val 값"이 출력된다 JSX 문법 3. html에 style속성 넣고싶으면 글씨 style은 중괄호 2개 [React] - 설치 visual code 터미널 단축키 ctrl+shift+` (단축키를 잘써먹자!) 열어서 npx create-react-app [프로젝트명] 설치 후 cd [프로젝트명] npm start 시작하면 끝! react js 설치 및 세팅 npm i create-react-app //create-react-app 설치 create-react-app 폴더명 //프로젝트 폴더 생성 cd 폴더명 //생성한 폴더로 이동 npm install // 필요한 라이브러리 설치 npm start //실행 *npm 설치되어있어야 합니다. 폴더구조 node_modules public/ favicon.ico index.html src/ App.css App.js App.test.js index.css index.js logo.svg package.json 기본적으로 create-react-app 으로 생성하면 포함되어있는 모듈이 있습니다. Webpack Babel Autoprefixer ESLint Jest 등... 빠르게 react 프로젝트를 시작하기에 좋습.. 이전 1 2 다음
