본문 바로가기

개발자21

개발일지 #19 - 리액트07 useState에 대한 개념(?)을 익혔으니 부가적인 문법들을 기록하려 한다. 선호하는 방법은 아니지만 기존 마크업 방식에서도 태그 안에 이벤트를 부여하는 방법이 있다. 보통 이를 '인라인 스타일(inline style)'이라고 알고 있다. 과거에 퍼블리싱을 배우는 단계에서는 이 방법을 추천하지 않았다. 나 역시 절대적으로 쓰면 안된다고 생각하지 않지만 좋은 방식은 아니라고 생각했다. 그래서 코드를 작성할 때 최대한 인라인 스타일을 사용하지 않으려고 노력했다. 그렇지만 요즘은 라이브러리나 스크립트를 통한 코드 작성 시 어쩔 수 없는 부분이라고 생각한다. 그래도 최대한 코드를 숨길 수 있다면 숨기는 것을 선호한다. '유연한 코드가 깔끔한 코드' 요즘 내가 생각하는 코드에 대한 생각이다. 서론이 길었으니 리.. 2022. 8. 6.
개발일지 #18 - 리액트06 저번 일지에 이어서 오늘도 리액트의 또 다른 데이터 사용 방법인 'useState'에 대해서 기록하려고 한다. useState에 여러 데이터를 저장해서 사용하는 방법에 대한 것이다. 우선 useState에 여러 데이터를 저장하는 방법은 배열을 이용하는 것이다. 아래의 코드를 참고 해보자. function App() { let [data, setData] = useState(['데이터', '자료','배열','어레이']); return ( {data} ) } 하지만 위의 코드처럼 작성하면 배열 속에 있는 자료가 다 나오고 만다. 원하는 자료만 뽑아내려면 배열에서 자료를 선택해서 사용하듯이 하면 된다. function App() { let [data, setData] = useState(['데이터', '자료'.. 2022. 8. 1.
개발일지 #17 - 리액트05 리액트에서 데이터 다루는 방법을 기록하려 한다. 데이터를 저장하고 사용하는 방법은 여러 방법이 있다. 리액트를 배우기 전까지 내가 알고 있던 데이터 저장과 사용 방법은 두 가지가 존재했다. 하나는 변수에 데이터를 담아서 저장을 해두었다가 사용하는 방식이다. 변수에 저장하는 방식도 다양하다. 배열 또는 객체 등등이 있다. 그리고 두 번째 방법은 서버에 데이터를 JSON 방식으로 저장해 두고 사용하는 방법이다. 리액트에서는 변수에 데이터를 잠깐 저장해서 사용하는 다른 방법이 존재한다. 'state'라는 문법을 활용하는 것이다. 리액트에서 이 문법을 사용하는 이유는 state 안 내용이 변경이 되면 HTML을 자동으로 재 렌더링이 되기 때문이다. 만약 순수 자바스크립트로 작성을 했다면 변수가 변경했을 때 다시.. 2022. 7. 31.
개발일지 #16 리액트-04 저번 일지에서 리액트의 코드 구성은 아래와 같았다. function App() { ruturn ( //코드 작성 ) } 여기서 하나의 규칙이 있다. 바로 병렬형 구조가 되지 않는다는 점이다. 예시로 들자면 아래의 코드는 에러가 발생한다. function App() { return ( //코드 //코드 ) } App을 제외한 컴포넌트 단위의 코드를 작성할 때도 return() 안에 하나의 태그로 감싸 져야 한다. 그래서 가끔 의미 없는 div 태그로 감싸는 경우가 존재한다. 이런 의미 없는 태그 생성을 막기 위한 문법이 하나 존재한다. "Fragment"라는 코드를 사용하는 것이다. function Test() { return ( //코드 ) } Fragment를 사용하려면 리액트에서 import(호출)해.. 2022. 7. 30.

티스토리툴바